Jquery.lazyload+masonry improved picture Waterfall Flow Code _ Image effect

The

Implementation method is as follows: (only jquery is here, the relevant HTML code please make up your mind, I will not hair, haha)

/** * Automatic refresh * @type {*|jquery|
HtmlElement} */var $container = $ (' #main '); $container. imagesloaded (function () {$container. Masonry ({itemselector: '. Item ', columnwidth:205, Gutterwid
Th:10, isanimated:true});
});
var pre_href; Scroll $ (window). Scroll (function () {//when scrolling to the bottom 100 pixel, load new content if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). h
  Eight () <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,//Gets the address of the element list data:{' act ': ' Ajax_wap_index '}, DataType: ' JSON ', type: ' Post ', b
      Eforesend:function () {show_loading_body ();
      }, Complete:function () {show_loading_body (); }, Success:function (data) {if (data.status!= undefined && data.status = ' OK ') {if (data.ht ml) {var $bOxes = $ (data.html);
              $container. Append ($boxes). Masonry ("appended", $boxes, true);//Append Element $container. imagesloaded (function () {
            $container. Masonry (); //After the picture is loaded, an automatic rearrangement is achieved. "Here is the emphasis"} if (Data.str_pages) {$ (' #page-nav '). HTML (data.str_pages);//Set the address of the next paging.
  "You can add"}}});
 }
}