使用JavaScript实现简单的瀑布流

我不是女神ヾ 2022-06-01 06:26 301阅读 0赞

##### 效果截图 #####

![SouthEast][]

##### 基本思路 #####

每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，第7张放在前6张中整体高度最小的那张下方，第8张放在前7张中整体高度最小的那张下方.......

整体高度：每一列的所有图片高度之和 以及padding、margin、border（如果有的话）之和

![SouthEast 1][]

##### 代码部分 #####

> HTML

######  ######

> ###### CSS  `#main{ position: relative; } .box{ padding-left:15px; padding-top:15px; float:left; } .pic{ padding:8px; border:1px solid #dcdcdc; border-radius:3px; box-shadow:0 0 5px #ccc; } .pic img{ width:230px; height:auto; }` ######

> ###### JavaScript  `window.οnlοad=function(){ waterfall(); } function waterfall() { var box = document.getElementsByClassName("box"); var boxWidth = box[0].offsetWidth; // 图片本身宽度 与 各种 padding margin border 的和 var cols = 5;// 每行放5张图片 var boxHeight = []; for (var i = 0; i < box.length; i++) { if (i < cols) { boxHeight.push(box[i].offsetHeight) } else { var minHeight = Math.min.apply(null, boxHeight);//得到最小高度 var minHeightIndex = getminHeightIndex(boxHeight, minHeight); // 得到第一行高度最小的图片的位置 box[i].style.position = 'absolute'; box[i].style.top = minHeight + 'px'; box[i].style.left = boxWidth * minHeightIndex + 'px'; boxHeight[minHeightIndex] = box[i].offsetHeight + boxHeight[minHeightIndex] } } } function getminHeightIndex(boxHeight, minHeight) { for (var i = 0; i < boxHeight.length; i++) { if (boxHeight[i] == minHeight) { return i; } } }`      ######

[SouthEast]: /images/20220601/3efda663a80e4951ba5f07505c603342.png
[SouthEast 1]: /images/20220601/784ed00da0c8434db1b29e292fab4e3a.png