实现瀑布流布局的俩种方法

来源：互联网 2024-10-11 01:41:37

瀑布流布局是一个之前挺火，现在也比较常见的一种布局

这种看起来参差不齐的多栏布局，重点在于每个元素等宽不等高，一般图片网站应用较多

随着页面滚动，数据块会在每列底部不断加载，理论上可以无限加载，且不会页面美观

Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站

效果图：

一、经典套路： JavaScript + 绝对定位

HTML 结构：

<p id="main">  ...  <p class="box">    <p class="wrapper">      <p class="pic"><img  src="" / alt="实现瀑布流布局的俩种方法" ></p>      <p class="text">简单介绍</p>    </p>  </p>  ...</p>

整个瀑布流区域用一个作为父容器

瀑布流中的每个数据块用 .box 作为基本布局， .wrapper 呈现样式和实际内容

CSS 样式：

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {  position: relative;  width: 1280px; /*限定父容器的宽度*/  margin: 0 auto;}.box {  position: absolute;  padding: 7px; /*不建议使用 margin*/  box-sizing: border-box;  width: 256px; /*限定数据块的宽度*/}.wrapper {  padding: 5px;  background-color: #fff;  border: 1px solid #e4e4e4;  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);}.pic {  font-size: 0; /*消除行内元素的间隙*/}.pic img {  width: 100%;  height: auto;}.text {  color: #999;  background: #FAFAFA;  font-size: 14px;  padding-top: 5px;}

在 .box 中设置了 padding 是为了留出视觉上的间距

之所以不使用 margin，是因为后面会使用 js 获取元素的 offsetWidth 和 offsetHeight

而这两个属性值是不计算 margin 的

JavaScript：

window.onload = function() {  waterFall(&#39;main&#39;, &#39;box&#39;)}function waterFall(main, box) {  var main = document.getElementById(main);  var boxs = main.getElementsByclassName(box);  var boxWidth = boxs[0].offsetWidth; //获取每个数据块的宽度  var mainWidh = main.offsetWidth; //获取主容器的宽度  var cols = Math.floor(mainWidh / boxWidth); //计算列数    var heightArr = []; //定义一个存放 top 值的数组  for(var i = 0; i < boxs.length; i++) {    var boxHeight = boxs[i].offsetHeight;      if(i < cols) { //第一行        heightArr.push(boxs[i].offsetHeight);        boxs[i].style.top = &#39;0px&#39;;         boxs[i].style.left = i * boxWidth +&#39;px&#39;;      } else {        //求出最矮盒子的高度        var minBoxHeight = Math.min.apply(this, heightArr);         //求出最矮盒子的索引         var minBoxIndex = getIndex(minBoxHeight, heightArr);         boxs[i].style.top = minBoxHeight + &#39;px&#39;; //顶部间距即最矮盒子的高度        boxs[i].style.left = minBoxIndex * boxWidth +&#39;px&#39;;         //关键:更新最矮盒子的高度        heightArr[minBoxIndex] += boxHeight;      }   }}function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;    }  }}

这种方案一开始给 .box 设置了 position: absolute;

所以在打开页面的时候，如果页面性能较差，可能会出现所有数据块堆叠在一起的情况

可以将 .box 的 position: absolute 替换为 float: left，然后在 js 添加定位样式的时候，再补上 position: absolute，视觉上会有所改观

二、纯 CSS3 实现瀑布流

CSS3 中新增了一个属性 column，可以通过规定列数 column-count，让浏览器自适应布局

只需要删除上面的 JavaScript 部分，然后修改 #main 和 .box：

#main {  width: 1280px;  margin: 0 auto;  -webkit-column-count: 5;  column-count: 5;  -webkit-column-gap: 0;  column-gap: 0;}.box {  padding: 7px;  box-sizing: border-box;  width: 256px;}

但通过这种方式实现的瀑布流，实际上是按照纵向排列的，而之前的经典方案是按照横向排列的

作为一个 CSS3 的新属性，只有 IE10 及以上的浏览器才支持 column

相信看了这些案例你已经掌握了方法，更多精彩请关注本站其它相关文章！