不确定图片高度情况下，如何实现瀑布流布局？
很多情况下，带图片的列表，在不能确定每一个item高度的情况下，如何实现瀑布流？每一个item的高度不一定，也不一样高（图片还会因网络延时而出现高度变化的情况）
展开
收起
1
条回答
写回答
写回答
-
IT从业两种方式：
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"即可；但是文字内容么~~~~只能固定高度了；
2019-07-17 19:45:59赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
