瀑布流的实现方式

目录

​​（1）css的multi-columns 写法​​

​​(2)flexbox ​​

​​(3)js实现瀑布流：实现横向瀑布流（以上是实现竖向的瀑布流）​​

---

（1）css的multi-columns 写法

html：

<div class="box">
          <div class="item">
            <div class="item_content content-lar">1我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">2我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">3我中号</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">4我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">5我中号</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">6我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">7我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">8我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">9我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">10我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">11我中号</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">12我中号</div>
          </div>
          <!-- more items -->
        </div>

css:

box：是瀑布流的容器：在容器里面​​column-count（列数） ​​和 ​​column-gap（​​列间距）

item：是列表​​ break-inside:avoid，这是​​为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

 

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  -moz-column-count: 4; /* Firefox */
  -webkit-column-count: 4; /* Safari 和 Chrome */
  column-count: 4; //设置列数
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em; //设置列间距
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin-bottom: 2em;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid; //防止单独成行
  background: #f60;
}

效果：

(2)flexbox 

html同上

css:

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  height: 600px;
  display: flex;
  flex-flow: column wrap;
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin: 10px 5px;
  background: #f60;
}

效果：

(3)js实现瀑布流：实现横向瀑布流（以上是实现竖向的瀑布流）

思路：用相对定位来布局，

首先根据屏幕和列数，确定单列的宽度

其次算出item与图片的宽高比

最后计算第一行和其他行的top和left实现

/item的top值：第一行：top为0
 //            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
 //                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
//item的left值：第一行：按照每块item的宽度值*块数
 //             其他行：与自身上面一块的left值相等

//瀑布流效果
//这里有一个坑（已经修复）：
//因为是动态加载远程图片，在未加载完全无法获取图片宽高
//未加载完全就无法设定每一个item(包裹图片)的top。

//item的top值：第一行：top为0
//            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
//                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
//item的left值：第一行：按照每块item的宽度值*块数
//             其他行：与自身上面一块的left值相等
function waterFall() {
    // 1- 确定图片的宽度 - 滚动条宽度
    var pageWidth = getClient().width-8;
    var columns = 3; //3列
    var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
    $(".item").width(itemWidth); //设置到item的宽度

    var arr = [];

    $(".box.item").each(function(i){
        var height = $(this).find("img").height();
        var width = $(this).find("img").width();
        var bi = itemWidth/width; //获取缩小的比值
        var boxheight = parseInt(height*bi); //图片的高度*比值 = item的高度

        if (i < columns) {
            // 2- 确定第一行
            $(this).css({
                top:0,
                left:(itemWidth) * i
            });
            arr.push(boxheight);

        } else {
            // 其他行
            // 3- 找到数组中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
                if (minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            // 4- 设置下一行的第一个盒子位置
            // top值就是最小列的高度 
            $(this).css({
                top:arr[index],
                left:$(".box.item").eq(index).css("left")
            });

            // 5- 修改最小列的高度 
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
            arr[index] = arr[index] + boxheight;
        }
    });
}


//clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}



 // 页面尺寸改变时实时触发
window.onresize = function() {
    //重新定义瀑布流
    waterFall();
};



//初始化
window.onload = function(){

    //实现瀑布流
    waterFall();

}

​

大道同归vue实现瀑布流或者react或者angular实现瀑布流思想都与此一样