瀑布流，css3实现和js实现

Multi-columns方式

• 纯CSS实现瀑布流要用到Css3多列属性，通过它相关的属性column-count、column-gap配合break-inside来实现瀑布流布局
• column-* 不支持IE9及其以下版本浏览器

*{margin: 0; padding: 0}
.masonry{
    column-count: 4;    /*需要分割的列数*/
    column-gap:10px;        /* 指定了列与列间的间隙 */
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
.item{
    break-inside: avoid; /*元素内部避免进行分页的分页行为*/
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    box-sizing: border-box;
}

---

优点：代码简洁，不影响容器高度。
缺点：每个item块从上往下先排第一列，然后排满第二列，第三列，当页面滚动，就出现第二列去的item块去第一列下面补齐。会出现闪屏效果。

使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列：

布局示意图

这样子若是动态加载图片的瀑布流，体验就会很不好。
想要这样：

就必须要js来实现

html代码和上面一样

.masonry{
    position: relative;
}
.item{
  z-index: 10;
  transition: all .3s;
  position: absolute;
  overflow: hidden;
}

js 瀑布流实现方式
css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值
--- 抄自别的大佬，当笔记用：---

//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 = [];

    $(".masonry .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:$(".masonry .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();

}