瀑布流可以传入自己的参数 主要取决于红色字体部分infinitescroll 等待图片加载完imagesloaded.pkgd.js

一番周折发现网上用infinitescroll 这不是多 ，给出的信息都是不全，以下是自己使用的总结，供大家参考

说明：

每个页面显示的图片尽量要多一些必须出现滚动条，这样才能实现滚动的实现加载第二页。所以我自己的分页是每页显示40个图片，因为有的图片比较短，所以每页显示的条数比较多

默认的话以下的分页链接只允许传一个参数page，为了能够传入自己的参数需要使用以下红色字体部分 

   

imagesloaded.pkgd.js 是为了确保图片加载之后实现瀑布流

query.masonry.min.js 是用于实现瀑布流的

query.infinitescroll.min.js  是用于实现无限滚动的

我自己对jquery.infinitescroll.min.js 这个脚本做了更改，便于实现在加载第二页的时候显示loading  主要是更改了beginAjax 方法：紫色部分是我做的更改

  $(opts.loading.selector).show();
            $("#black_bj").show();
            switch (method) {
                case 'html+callback':
                    instance._debug('Using HTML via .load() method');
                    box.load(desturl + ' ' + opts.itemSelector, undefined, function infscr_ajax_callback(responseText) {
                        instance._loadcallback(box, responseText, desturl);
                    });
                    break;

                case 'html':
                    instance._debug('Using ' + (method.toUpperCase()) + ' via $.ajax() method');                   
                    $.ajax({
                        // params
                        url: desturl,
                        dataType: opts.dataType,
                        complete: function infscr_ajax_callback(jqXHR, textStatus) {
                            condition = (typeof (jqXHR.isResolved) !== 'undefined') ? (jqXHR.isResolved()) : (textStatus === "success" || textStatus === "notmodified");
                            if (condition) {
                                instance._loadcallback(box, jqXHR.responseText, desturl);
                            } else {
                                instance._error('end');
                            }
                            $(opts.loading.selector).hide();
                            $("#black_bj").hide();
                        }
                    });

                    break;

   
   
   
   
   



   

     
       

           

               
                   
                       

                           

                               
                                    ">
                           

                       

                   
               
           

           

                正在加载...