文章来源:https://www.toymoban.com/news/detail-721292.html
前提是每张图片宽度要设置成一样,准备15张图测试文章来源地址https://www.toymoban.com/news/detail-721292.html
<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>
到了这里,关于css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!