css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

前提是每张图片宽度要设置成一样,准备15张图测试

<div class="img-main">
                <div>
                    <img src="@/assets/images/sq/1.jpg" alt="" title="1">
                </div>
                <div>
                    <img src="@/assets/images/sq/2.jpg" alt="" title="2">
                </div>
                <div>
                    <img src="@/assets/images/sq/3.jpg" alt="" title="3">
                </div>
                <div>
                    <img src="@/assets/images/sq/4.jpg" alt="" title="4">
                </div>
                <div>
                    <img src="@/assets/images/sq/5.jpg" alt="" title="5">
                </div>
                <div>
                    <img src="@/assets/images/sq/6.jpg" alt="" title="6">
                </div>
                <div>
                    <img src="@/assets/images/sq/7.jpg" alt="" title="7">
                </div>
                <div>
                    <img src="@/assets/images/sq/8.jpg" alt="" title="8">
                </div>
                <div>
                    <img src="@/assets/images/sq/9.jpg" alt="" title="9">
                </div>
                <div>
                    <img src="@/assets/images/sq/00.jpg" alt="" title="00">
                </div>
                <div>
                    <img src="@/assets/images/sq/11.jpg" alt="" title="11">
                </div>
                <div>
                    <img src="@/assets/images/sq/12.jpg" alt="" title="12">
                </div>
                <div>
                    <img src="@/assets/images/sq/13.jpg" alt="" title="13">
                </div>
                <div>
                    <img src="@/assets/images/sq/14.jpg" alt="" title="14">
                </div>
                <div>
                    <img src="@/assets/images/sq/15.jpg" alt="" title="15">
                </div>
 </div>

1.屏幕大小列可变column实现,设置默认每列的图片宽度

 //瀑布流column实现
 .img-main {
    //宽度200px 
    column-width: 300px;
    //列之间间隔2px 
    column-gap: 2px;
}
.img-main>div>img {
    width: 100%;
} 

2.屏幕大小列可变2 @media来控制

/* //瀑布流column实现 */
.img-main {
    /* 设置列数 改变屏幕大小@media 来控制-实现 默认1列-可自动改变  */
    column-count: 1;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}

/* 使用媒体查询，根据屏幕大小来调整列数 */
@media (min-width: 768px) {
    .img-main {
        column-count: 3;
        /* 屏幕宽度大于等于768px时，设置为3列 */
    }
}

@media (min-width: 1024px) {
    .img-main {
        column-count: 6;
        /* 屏幕宽度大于等于1024px时，设置为4列 */
    }
}

3.不可变-屏幕大小列不可变

.img-main {  
  column-count: 4; /* 设置列数为4 */  
  column-gap: 10px; /* 设置列之间的间距 */  
}  
.img-main>div {  
  margin-bottom: 10px; /* 设置每个item的底部间距 */  
  break-inside: avoid; /* 防止图片被拆分到两列 */  
}  
.img-main>div>img {  
  width: 100%; /* 图片宽度自适应列宽 */  
  height: auto; /* 图片高度自适应以保持原始比例 */  
}

4.不可变-屏幕大小列不可变

/* //瀑布流column实现 */
.img-main {
    /* 默认5列  */
    column-count: 5;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}

5.可变-可变js来实现-屏幕大小列可变

  .img-main {
            position: relative;
        }
        .img-main>div>img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }

<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);

            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍历所有图片进行定位处理
            $.each($('img'), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }

        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>