Record waterfall flow+pull-down infinite load+pit stepped by lightbox page

Recently, I received an order. The page needs waterfall flow plus pull-down unlimited loading. In addition, clicking on the image also requires a lightbox effect. It is obviously pointless to write pages of this complexity by yourself [it is not advisable to repeatedly build wheels, in addition, wheels of this level cannot be created...]

Directly on the ready-made library.

The waterfall stream uses "masonry", the pull-down infinite load uses "infinite scroll", and the picture light box uses "lightGallery".

The pit is in the integration.

Masonry has many tutorials to use with infinite scroll.

The first pitfall is that the pull-down loading of the new page "lightGallery" has no effect.

After querying and searching, it is found that you need to use "destroy" in the callback function to destroy and reload the data after the "Infinitescroll" drop-down is loaded successfully.

The second pitfall is that when masonry loads some images slowly, the problem of page overlap will occur because the image height cannot be obtained. The problem is still with the customer website I found that my own test station could not be found because of its speed

The solution is to first determine whether the image is loaded, and then execute the masonry waterfall effect after all the images are loaded.

---

Finally, the code is attached. If the js files of the three libraries need to be loaded, they will not be pasted. The following is the direct integration code of the three libraries:

 var $container = $('.img-wrap'); //  Masonry large container var t_img; //  timer var isLoad = true; //  control variable  isImgLoad(function () { //Loading completed setTimeout(function() { $container.masonry({ ItemSelector: '. img item',//masonry project ColumnWidth: '. img item',//masonry width percentPosition: true }); }, 100); }); function isImgLoad(callback) { $('. img'). each (function() {//All pictures are given to the "img" class name if (this.height === 0) { isLoad = false; return false; } }); if (isLoad) { clearTimeout(t_img); callback(); } else { isLoad = true; t_img = setTimeout(function () { isImgLoad(callback); }, 500); } } $container.infinitescroll({ navSelector: "#npage", nextSelector: "#npage a", itemSelector: ".img-item", pixelsFromNavToBottom: 300, loading: { MsgText: 'I'm loading the force...', FinishedMsg: 'I have seen all of them', }, }, function(newElements) { $(".img-wrap").data("lightGallery").destroy(true); createLightGallery(); var $newElems = $(newElements).css({ opacity: 0 }); setTimeout(function() { $newElems.animate({ opacity: 1 }); isImgLoad(function () { $container.masonry('appended', $newElems, true); }); }, 100); } );