javascript - 不确定图片高度情况下，如何实现瀑布流布局？
本文介绍了javascript - 不确定图片高度情况下，如何实现瀑布流布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
很多情况下，带图片的列表，在不能确定每一个item高度的情况下，如何实现瀑布流？每一个item的高度不一定，也不一样高（图片还会因网络延时而出现高度变化的情况）
解决方案
两种方式：
1，item使用绝对定位的；例子：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="box-img">
<img src="img1.jpg" alt="pic1">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="img2.jpg" alt="pic2">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="img3.jpg" alt="pic3">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="img4.jpg" alt="pic4">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="img5.jpg" alt="pic5">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="img6.jpg" alt="pic6">
</div>
</div>
</div>
</body>
</html>
CSS:
*{margin: 0;padding: 0;}
.container{position: relative;width: 1040px;margin: 0 auto;}
.box{float: left;padding: 5px;font-size: 0;}
.box-img img{width: 250px;}
JQ:
$(function(){
var elesHeight = [];//每个元素的宽度
var colsHeight = [0,0,0,0]; //每列元素现有的高度
$(".container .box").each(function(index,item){
var eleHeight = $(this).height();
elesHeight.push(eleHeight);
});
//依次摆放每一个元素
$(".container .box").each(function(index,item){
//获得该元素应该在第几列
var colShould = getMinHeightCol(colsHeight);
var tempTop = colsHeight[colShould];
var tempLeft = colShould*260;
$(this).css({"position":"absolute","top":tempTop+"px",left:tempLeft+"px"});
//同时将该列的高度加上当前新增元素的高度
colsHeight[colShould] += $(this).height();
});
//得到四列中高度最小的那一列
function getMinHeightCol(arr){
var minHeight = Math.min.apply(null, arr);
console.log("最小高度:"+minHeight);
for(var i in arr){
if(arr[i]==minHeight){
return i;
}
}
//默认第一列
return 0;
}
var re;
window.onresize = function() {
clearTimeout(re);
re = setTimeout(resize,100);
};
});
2：item所显示图片为缩略图，缩略图生成后高度存储到数据库，前端生成页面时，写到img的style="height:XXXX"即可；但是文字内容么~~~~只能固定高度了；
更新下，丢人了，少些了高度两字被人嘘了；骚瑞哦~
这篇关于javascript - 不确定图片高度情况下，如何实现瀑布流布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
