JavaScriptL如何实现瀑布流布局

这篇“JavaScriptL如何实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScriptL如何实现瀑布流布局”文章吧。

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

　　HTML结构：

　　<divid="main">

　　...<divclass="box">

　　<divclass="wrapper">

　　<divclass="pic"><imgsrc=""/></div>

　　<divclass="text">简单介绍</div>

　　</div>

　　</div>

　　...</div>

　　整个瀑布流区域用一个<divid="main">作为父容器

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

　　CSS样式：

　　*{margin:0;padding:0;}html,body{width:100%;height:100%;background-color:#EDEDED;}#main{

　　position:relative;

　　width:1280px;/*限定父容器的宽度*/

　　margin:0auto;

　　}.box{

　　position:absolute;

　　padding:7px;/*不建议使用margin*/

　　box-sizing:border-box;

　　width:256px;/*限定数据块的宽度*/}.wrapper{

　　padding:5px;

　　background-color:#fff;

　　border:1pxsolid#e4e4e4;

　　box-shadow:01px5pxrgba(0,0,0,.2);

　　}.pic{

　　font-size:0;/*消除行内元素的间隙*/}.picimg{

　　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')

　　}

　　functionwaterFall(main,box){varmain=document.getElementById(main);varboxs=main.getElementsByClassName(box);varboxWidth=boxs[0].offsetWidth;//获取每个数据块的宽度

　　varmainWidh=main.offsetWidth;//获取主容器的宽度

　　varcols=Math.floor(mainWidh/boxWidth);//计算列数

　　varheightArr=[];//定义一个存放top值的数组

　　for(vari=0;i<boxs.length;i++){varboxHeight=boxs[i].offsetHeight;if(i<cols){//第一行heightArr.push(boxs[i].offsetHeight);

　　boxs[i].style.top='0px';

　　boxs[i].style.left=i*boxWidth+'px';

　　}else{//求出最矮盒子的高度

　　varminBoxHeight=Math.min.apply(this,heightArr);

　　//求出最矮盒子的索引

　　varminBoxIndex=getIndex(minBoxHeight,heightArr);

　　boxs[i].style.top=minBoxHeight+'px';//顶部间距即最矮盒子的高度

　　boxs[i].style.left=minBoxIndex*boxWidth+'px';

　　//关键:更新最矮盒子的高度

　　heightArr[minBoxIndex]+=boxHeight;

　　}

　　}

　　}

　　functiongetIndex(val,arr){for(variinarr){if(val==arr[i]){returni;

　　}

　　}

　　}

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

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

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

　　二、纯CSS3实现瀑布流

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

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

　　#main{

　　width:1280px;

　　margin:0auto;

　　-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

以上就是关于“JavaScriptL如何实现瀑布流布局”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。