瀑布流主要JS代码

    <script type="text/javascript">
        $(document).ready(function () {
            var $container = $('.list');

            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '.box',
                    columnWidth: 5 //每两列之间的间隙为5像素
                });
            });

            $container.infinitescroll({
                navSelector: '#page-nav',    // 选择的分页导航 
                nextSelector: '#page-nav a',  // 选择的下一个链接到(第2页)
                itemSelector: '.box',     // 选择检索所有项目		
                animate: true,
                extraScrollPx: 0,
                loading: {
                    msgText: '正在加载',
                    finishedMsg: '数据已全部加载',
                    img: 'images/loading.gif'
                }
            }, function (newElements) {

                // 隐藏新的项目,而他们正在加载
                var $newElems = $(newElements).css({ opacity: 0 });

                // 确保的图像装载增加砖石布局
                $newElems.imagesLoaded(function () {

                    // 元素展示准备
                    $newElems.animate({ opacity: 1 });
                    $container.masonry('appended', $newElems, true);

                });

            });

        });
    </script>


/*加载的样式*/
#infscr-loading{ text-align:center; padding:10px 20px; opacity:0.8; filter:alpha(opacity=80); color:#333; font-size:13px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
#infscr-loading img{ height:20px;}
#infscr-loading{ /*position:fixed; bottom:0px; left:0px; width:100%; */ <span style="font-family: Arial, Helvetica, sans-serif;">text-align:center; z-index:9999;}    /*瀑布流解释。加载注释*/</span>
*html #infscr-loading{ /*position:absolute; bottom:expression(eval(document.documentElement.scrollTop));*/}   /*瀑布流解释。加载注释*/


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值