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

瀑布流,根据屏幕大小列可变和不可变的的瀑布流"/>

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(); // 200waterfallHandler();// 瀑布流处理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>