瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

小小许

发布于 2018-09-20 17:08:35

3K0

发布于 2018-09-20 17:08:35

文章被收录于专栏：angularejs学习篇 angularejs学习篇angularejs学习篇

瀑布流加载显示数据，在当下已经用的很普遍，尤其是我们在做网上商城时，在产品列表页面已经被普遍使用。

对于实现瀑布流布局的解决方案主要有以下两种方式：

1、对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度

2、采用列布局，将每一条数据依次放置到每一列

其实两者的实现原理都是大同小异，现在我将针对第二种解决方案，用一个具体的事例来说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    body,ul,li{margin:0;margin:0;}
    ul{list-style:none;}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
    /*瀑布流*/
    /*.wallList{width:860px;}*/
    .wallList li{float:left;display:inline;margin-right:16px;}
    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
    .wallList li a:hover{border-color:#f60;}
    .wallList li .name{display:block;text-align:center;padding:8px 0;} 

    .loadTips{text-align:center;padding:15px 0;}
    </style>
</head>
<body>
    <div class="wallList" id="wallList">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="loadTips" id="loadTips">
            19880902 <span>正在加载......</span></p>
    </div>
</body>
</html>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // 数据格式
    var testJson = {
        "status": 1,
        "data": [
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片1" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片2" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片3" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片4" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片5" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name": "图片6" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片7" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片8" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name": "图片9" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片10" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name": "图片11" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片12" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name": "图片13" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name": "图片14" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name": "图片15" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片16" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name": "图片17" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片18" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片19" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片20" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片21" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片22" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片23" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片24" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片25" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片26" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片27" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片28" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片29" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片30" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片31" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片32" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片33" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片34" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片35" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片36" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片37" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片38" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片39" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片40" }
        ]
    }

    var wallPic = function () {
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
            oTop = 0, //滚动判断的值
            row = 5, //列数
            page = 1, //ajax请求的页码值
            url = 'xxxx', //ajax请求地址
            on_off = true; //插入结构的开关，防止ajax错误性多次加载数据

        return {
            fillData: function (callback) {
                var _that = this;
                on_off = false;
                /* ajax
                --------------------*/
                // $.get(url,{ page:page,count:30 },function(json){
                //     if(json.status==1){
                //         _that.appendHTML(json.data);
                //         on_off = true;
                //         page++;
                //     }else{
                //         _that.loadedTips();
                //     }
                // },'json');

                /* 模拟测试-设置定时器模拟ajax请求数据
                -----------------------*/
                setTimeout(function () {
                    // 模拟终止
                    if (page == 5) {
                        _that.loadedTips();
                        return;
                    }
                    _that.appendHTML(testJson.data);
                    on_off = true;
                    page++;
                }, 400);
            },
            appendHTML: function (data) {
                var len = data.length,
                    n = 0;
                for (; n < len; n++) {

                    /*每次都将数据加载到高度最小的LI中---最终实现所有li高度都大致相当*/
                    var minHeight = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height(), $li.eq(3).height(), $li.eq(4).height()]);
                    for (var j = 0; j < 5; j++) {
                        if (minHeight == $li.eq(j).height()) {
                            $li[j].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + page * n + data[n].name + '</span></a>';
                            break;
                        }
                    }
                    /*依次均与的将数据分布到每一列中---将会出现有的li高度会很大
                    var k = 0;
                    n > (row - 1) ? k = n % row : k = n;
                    $li[k].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + data[n].name + '</span></a>';
                    */
                }
                this.getOTop();
            },
            getOTop: function () {
                oTop = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height()]) + $target.offset().top;
            },
            loadedTips: function () {  //数据加载完毕
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(function () {
                    $('#loadTips').css({ 'visibility': 'hidden' });
                }, 200);
                // 解绑事件
                $(window).unbind('scroll', $.proxy(this.scrollEvent, this));
            },
            scrollEvent: function () {//鼠标滚轮事件
                if ($(document).scrollTop() + $(window).height() > oTop && on_off) {
                    this.fillData();
                }
            },
            init: function () {//开始执行事件
                this.fillData();
                $(window).bind('scroll', $.proxy(this.scrollEvent, this));
            }
        }
    } ();
    wallPic.init();
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014-05-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐