JQuery. lazyload + masonry improved image waterfall stream code

The implementation method is as follows: (only jquery is sent here. Please fill in the relevant html code by yourself. I will not send it, haha)

/*** Auto refresh * @ type {* | jQuery | HTMLElement} */var $ container = $ ('# main'); $ container. imagesLoaded (function () {$ container. masonry ({itemSelector :'. item ', columnWidth: 205, gutterWidth: 10, isAnimated: true}) ;}; var pre_href; // scroll $ (window ). scroll (function () {// load the new content if ($ (document) when it is scrolled to a base over 100 pixels ). height ()-$ (this ). scrollTop ()-$ (this ). height () <100) {ajax_load_data () ;}}); function ajax_load_data () {Var href = $ ('# page-nav'). find ('. nextprev'). attr ('href '); if (href & href! = Pre_href) {console. log ('href = '+ href); pre_href = href; $. ajax ({url: href, // address for retrieving the element list data: {'act ': 'ajax _ wap_index'}, dataType: 'json', type: 'post ', beforeSend: function () {show_loading_body () ;}, complete: function () {show_loading_body () ;}, success: function (data) {if (data. status! = Undefined & data. status = 'OK') {if(data.html) {var $ boxes =$ (data.html); $ container. append ($ boxes ). masonry ("appended", $ boxes, true); // append element $ container. imagesLoaded (function () {$ container. masonry () ;}); // After the image is loaded, it is automatically rearranged. [Key here]} if (data. str_pages) {response ('privacy page-nav'privacy .html (data. str_pages); // you can specify the address of the next page. [Can be supplemented by yourself ]}}}});}}