jquery Waterfall Flow Infinite Drag three powerful weapon: Masonry+imagesloaded+infinitescroll

Waterfall flow is an almost obsolete technology, but it's not easy for many friends who want to make it fast, because even though we already have a lot of ready-made code, we find that we can't quickly get the results we want in our own development environment. Just like the three great weapons we're going to introduce (masonry+imagesloaded+infinitescroll) even if they're so effective, it's hard to get what we want with a hot potato class when we're going to use it right now.

Below, we explain their use in terms of their principles to help you better perform its functions. But to get it done quickly, we don't explain everything.

1. Reasonable HTML layout is the basic problem of ↑

In some cases, the error of the HTML layout (especially in WordPress) resulted in the failure of the infinite drag. Let's take a look at the more logical HTML structure

<div id="container">  <div class="item">...</div>  <div class="item w2">...</div>  <div class="item">...</div>  ...</div><div id="page-navi">...</div>

Note: The above #container and #page-navi are separated, #container的任务就包含瀑布流列表, the work of paging to #page-navi to complete.

In many cases, #container内的结构不规律, there are some miscellaneous, even put #page-navi in the inside, this is the cause of the error in the subsequent processing.

2. When the picture is present masonry+imagesloaded use ↑

In some cases, small white in accordance with the official code on the network layout, structure to find the picture overlap together, so small white panic, think is not a plugin conflict ah, it is impossible to official code also has problems! Yes, there is a problem with the official code, because little white did not read the official introduction, simply look at a small piece of code will have this problem.

When the picture appears in the. Item, we have to wait until the picture is loaded and then execute the masonry, otherwise the masonry will give the. Item a height according to the height of the picture that has not yet been loaded, which results in a sense of confusion.

The use of imagesloaded can avoid this situation, imagesloaded will check whether the picture in #container is loaded, only if the picture is loaded, the code in the callback will be executed. So, if you want to realize waterfall flow when the picture is present, you must wait until the picture is loaded and then use masonry. Of course, some people do not need to imagesloaded, they use window.load, but such words will wait a long time, if the speed is slow, the picture loaded half a day without loading, waterfall flow will never come out. So, I use this when I use the code:

$ (' #container '). imagesloaded (function () {New Masonry (document.getElementById (' container '), {itemselector: '. Item '} );});

This usage is very strange, the official said you can use the jquery method, you can use $ (' #container '). Masonry ({itemselector: '. Item '}); but you have to think like this, jquery's $ () is instant access , a node gets loaded right away, and that's not a good thing, just like ready and load, but there's no load, that's the picture! Picture ready is loading a tag, seconds, but it takes a lot of time and traffic to load.

And if your list is all text, then you don't have to think about it, because the text is really ready to do.

3. Let Infinitescroll finish, get the loaded node ↑

Small white in the use of infinitescroll time is very anxious, hope can be unlimited drag, but there is a very serious problem is that you have to wait until the loading of all the content has been loaded, and even the loading of the picture has been done, only to start action. Just like the code above, if you load a bunch of pictures, but the picture is not loaded, just ready, you start to execute the masonry, then reload masonry because the image fetched from the back page has not load, Instead of determining the height of the. Item, it is possible to have these newly loaded. Item run to the top of the #container. I think most of the small white have encountered this situation.

If you have a deep understanding of this, you will feel that the above short, seemingly strange code, how subtle.

Put it in the Infinitescroll execution callback function.

$ (' #container '). Infinitescroll ({navselector: ' #page-navi ', Nextselector: ' #page-navi a.next ', Itemselector: ' # Container. Item '//: Additional parameters},function (Arrayofnewelems) {$ (arrayofnewelems) are omitted. AppendTo (' #container '); $ (' #container '). imagesloaded ( function () {New Masonry (document.getElementById (' container '), {itemselector: '. Item '}); / .. Save the other actions});

Such a logic is very clear.

Of course, there is a more difficult to grasp in the infinitescroll. Although we obtained the arrayofnewelems, we did not get the whole DOM. The official tip this time this is to get the entire DOM, but immediately prompt for the 1.5 version after this is only the #container in the DOM obtained, people are somewhat puzzled.

Official address: Infinitescroll?masonry imagesloaded

jquery Waterfall Flow Infinite Drag three powerful weapon: Masonry+imagesloaded+infinitescroll