一种瀑布流效果的实现

精选30+云产品，助力企业轻松上云！>>>

最近一个项目使用到了瀑布流效果，在这里总结一下。使用jquery框架。

最终效果:

思路：

    使用五个并列的div；

    首次加载n条数据；

    之后由scroll触发ajax数据加载；

    加载每条数据时，判断5个div的高度，把数据加载到高度最短的div里。

数据加载代码:

$(document).bind('scroll',(function(){
    //离底部100px时触发加载
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if (closeToBottom&&(global.total>(global.page)*global.limit)) {
         global.page++;
         global.loadData();
     }
}));

5个div

<div class="content">
        <div class="col col1">

        </div>
        <div class="col col2">

        </div>
        <div class="col col3">

        </div>
        <div class="col col4">

        </div>
        <div class="col col5">

        </div>
</div>

css

.content{
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
.home-content .col{
    width: 200px;
    margin: 0 5px 0 5px;
    display: inline-table;
}

    loadData:function(){
        $.getJSON(
            你的url,
            global.params,
            function(rep){
                var result = rep;
                global.total = result.total;
                //确认有数据
                if(result&&result.rows&&result.rows.length>0){
                    var arr = result.rows;
                    //循环加载每一条数据
                    for(var i = 0,len = arr.length;i<len;i++){
                    //拼html
                        var content = '<div class="content-item">'+
                            '<a target="_blank" href="跳转url"><img width="200" src="'+arr[i].imgurl+'"></a>'+
                            '<div class="card-intro">'+
                            '<p class="card-t">'+arr[i].title+'</p>'+
                            '<p class="card-news">'+arr[i].abstract+'</p>'+
                            '<span class="card-more">'+
                             global.formatTime(arr[i].time)+'/'+
                            '<a target="_blank" href="跳转url">阅读更多</a>'+
                            '</span>'+
                            '</div>'+
                            '</div>';
                         //得到高度最低的div然后添加到末端，此处可以优化用变量保存各div的高度，不用每次get
                        global.getListMin().append(content);
                    }

                }
            }
        );
    },
    //时间format
    formatTime:function(time){
        return time.substr(0,4)+'-'+time.substr(4,2)+'-'+time.substr(6,2);
    },
    getListMin:function(){
        var listDiv=[$('.col1'),$('.col2'),$('.col3'),$('.col4'),$('.col5')];
        var min = $('.col1').height();
        var item = $('.col1');
        //循环5个div获取高度最低的那个
        for(var i = 1,len=listDiv.length;i<len;i++){
            if(listDiv[i].height()<min){
                item = listDiv[i];
                min = listDiv[i].height();
            }
        }
        return item;
    }

页面效果: http://www.xinzangcha.com/News

缺点: 当5列div某列的第一个数据高度和其余的不同时，其余div会出现留白的现象，待修正。