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

最新推荐文章于 2026-02-27 04:34:05 发布

原创最新推荐文章于 2026-02-27 04:34:05 发布 · 2.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#瀑布流 #js

瀑布流 js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在瀑布流布局中使用infinitescroll并传入自定义参数，强调了图片数量对滚动加载的影响，并分享了对jquery.infinitescroll.min.js脚本的修改，以在加载过程中显示loading提示。

一番周折发现网上用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;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/imagesloaded.pkgd.js" type="text/javascript"></script>
    <script src="js/jquery.masonry.min.js" type="text/javascript"></script>
    <script src="js/jquery.infinitescroll.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="nei_con" style="background: #fff9ed" id="wrapper">
        <div class="show_list" id="show_list">
            <div class="show_list_main" id="waterfall">
                <asp:Repeater runat="server" ID="repListSilver">
                    <ItemTemplate>
                        <div class="show_list_con">
                            <div class="show_pic">
                                <a href='/WBPersonalPage.aspx?hid=<%#Eval("hid") %>' target="_blank">
                                    <img src="<%#Eval("imgurl") %>"></a>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <div class="loading" id="loading">
                <img src="images/loading.gif" /><span>正在加载...</span>
            </div>
        </div>
    </div>

    <div id="navigation"><a href="ScrollHtml.aspx?page=1"></a></div>
    <div id="black_bj" class="black_bj" style="display: none;"></div>
    <script type="text/javascript">
        $(function () {
            // element
            imagesLoaded(document.querySelector('#waterfall'), function (instance) {
                $('#wrapper').masonry({
                    itemSelector: '.show_list_con',
                    gutterWidth: 10,
                    columnWidth: 200,
                    isFitWidth: false//这里设置为false 表示采用自己的样式不自适应

});

$('#waterfall').infinitescroll({

                    maxPage: <%=Math.Ceiling(totalRecords/(pagesize*1.0))%>,
                    navSelector: "#navigation", //导航的选择器，会被隐藏
                    nextSelector: "#navigation a", //包含下一页链接的选择器
                    itemSelector: ".show_list_con", //你将要取回的选项(内容块)
                    debug: true, //启用调试信息
                    animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                    extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
                    bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
                    errorCallback: function () {
                        alert('error');
                    }, //当出错的时候，比如404页面的时候执行的函数
                    localMode: true, //是否允许载入具有相同函数的页面，默认为false
                    dataType: 'html',//可以是json
                    //                template: function(data) {
                    //                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
                    //                    return '';
                    //                },
                    loading: {
                        msgText: "加载中...",
                        finishedMsg: '没有新数据了...',
                        selector: '#loading' // 显示loading信息的div
                    }
                    ,pathParse:function(path,index){
                        return "CandidateScrollHtml.aspx?page="+index+"&tag=<%=tag%>&h=<%=h%>";
                    } // 采用自己的url切割方式以便传入除了page之外的参数
                    ,path:function(index){
                        return "CandidateScrollHtml.aspx?page="+index+"&tag=<%=tag%>&h=<%=h%>";
                    }// 采用自己的url切割方式以便传入除了page之外的参数

                }, function (newElems) {
                    //程序执行完的回调函数
                    var $newElems = $(newElems);
                    $('#wrapper').masonry('appended', $newElems);
                    $("#loading").hide();
                    $("#black_bj").hide();
                });

            });
        });
    </script>
</body>
</html>