web开发中实现瀑布流布局的方法有哪些
小编给大家分享一下web开发中实现瀑布流布局的方法有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
瀑布流布局是一个之前挺火,现在也比较常见的一种布局
这种看起来参差不齐的多栏布局,重点在于每个元素等宽不等高,一般图片网站应用较多
随着页面滚动,数据块会在每列底部不断加载,理论上可以无限加载,且不会页面美观
Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站
效果图:
一、经典套路: JavaScript + 绝对定位
HTML 结构:
<div id="main"> ... <div class="box"> <div class="wrapper"> <div class="pic"><img src="" /></div> <div class="text">简单介绍</div> </div> </div> ...</div>
整个瀑布流区域用一个 <div id="main"> 作为父容器
瀑布流中的每个数据块用 .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('main', 'box') } 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 = '0px'; boxs[i].style.left = i * boxWidth +'px'; } else { //求出最矮盒子的高度 var minBoxHeight = Math.min.apply(this, heightArr); //求出最矮盒子的索引 var minBoxIndex = getIndex(minBoxHeight, heightArr); boxs[i].style.top = minBoxHeight + 'px'; //顶部间距即最矮盒子的高度 boxs[i].style.left = minBoxIndex * boxWidth +'px'; //关键:更新最矮盒子的高度 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
以上是web开发中实现瀑布流布局的方法有哪些的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!