瀑布流的3种实现方式

瀑布流的3实现方式

1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下：

• 瀑布流容器

<!--瀑布流容器-->
<div id="box"></div>

js代码

//接口获取数据，循环展示
 function forList(list){
             var HTML = "";
         for(var i=0;i<list.length;i++){
            HTML+='<li class="item" data="'+i+'">' ;
            HTML+='<div class="box-item">' ;
            HTML+='<img src="'+list[i].sIMG+'" alt=""><div class="text">'+list[i].sTitle+'</div>';
            HTML+= '</div>';
            HTML+= '</li>';
        }
         
             /**
              * HTML ;拼接后的字符串
              * #box，存放瀑布流的容器
              */
              // 调用瀑布流函数
             warterfall(HTML,'#box')
    }
    //拉取数据
    forList(lists1);
    // 瀑布流函数
    function warterfall(HTML,content) {
       //生成左右两个容器及暂时存放元素的容器（hidebox）
        if($(content+' ul').length<=0){
            $(content).append('<ul class="left"></ul><ul class="right"></ul><ul id="hidebox" style="display: none;"></ul>');
        }
        //数据先放在一个隐藏的容器，
        $("#hidebox").html(HTML);

       //取出元素
       var  items=$("#hidebox li");
       //获取左右两个容器
        var leftbox=$(content+' .left');
        var rightbox=$(content+' .right');
        //设置延迟，保证图片加载完成，避免影响左右容器高度的计算，导致数据放到错误的位置
        setTimeout(function () {
            // 左边容器高度
            var leftDivHeight = leftbox.height();
            // 右边容器高度
            var rightDivHeight =rightbox.height();
            items.each(function (index,item) {
                //瀑布流函数,该函数计算左右容器的总高度，决定把下一个元素放在哪个容器里面
                //获取左右容器高度
                leftDivHeight = leftbox.height();
                rightDivHeight =  rightbox.height();