微信同城小程序_JavaScript瀑布流布局完成代码

摘要: JavaScript流式布局合理布局完成编码 本文关键为大伙儿详尽详细介绍了JavaScript流式布局合理布局的完成编码,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下如今许...

JavaScript瀑布流布局实现代码       这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

现在好多网站都采用这种瀑布流布局,如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。
第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

首先实现框架。

 div id = "main" 
 div class = "box" 
 div class = "pic" 
 img src = "images/0.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/1.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/2.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/3.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/4.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/5.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/6.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/7.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/8.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/9.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/10.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/11.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/12.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/13.jpg" 
 /div 
 /div 
 div class = "box" 
 div class = "pic" 
 img src = "images/14.jpg" 
 /div 
 /div 
 /div 

这里定义了14个图片,每个图片都被一个 >

 padding: 0px;
 margin: 0px;
 #main{
 position: relative;
 .box{
/* display: inline-block;*/
 padding: 15px 0px 0px 15px;
 float: left;
 .pic{
 padding: 10px;
 border-radius: 5px;
 border:1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 .pic img{
 width: 165px;
 height: auto;
 /style 

效果图如下:

其实每一行六个图片不是固定的,当你缩小窗口时,它会成为两列,或者三列四列。但我们为了以后的布局,就将它设置为固定的列数,即根据窗口的大小除以图片的大小,向下取整。

接下来写的是js实现的瀑布流布局。
在写代码之前,由于要用到box属性,而js中没有直接定义获得class的方法,所以我们在这儿要写一个获得class的方法:

function getByClass(parent,className){
 var boxArr = new Array();//用来获取所有class为box的元素
 oElement = parent.getElementsByTagName('*');
 for (var i = 0; i oElement.length; i++) {
 if(oElement[i].className == className){
 boxArr.push(oElement[i]);
 return boxArr;

两个参数分别是父元素和要查找的classname。

接下来写函数:

//首先在onload函数中调用函数
window.onload = function(){
 waterFull('main','box');

//先获得父元素及其底下所有的class = box的元素 var oParent = document.getElementById(parent); var oBoxs = getByClass(oParent,children); //我们在前面说过,数据块的列数我们是希望不变的。由于每个数据块都是等宽的,所以可以以第一个数据块的宽度为准,获得数据块的宽度。再计算数据块的列数,向下取整。 var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); 接下来设置父元素的样式,我们需要获得它的宽度,并且使其居中 oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto'; //在定义好了所有的样式之后,就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度,从第二行开始,使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box,即oBoxs var arrH = []; //定义数组存放每一列的高度 for(var i = 0; i oBoxs.length; i++){ //当是第一行时,直接将数据块依次排列,并在数组中记录每一列的高度 if(i cols){ arrH[i] = oBoxs[i].offsetHeight; //当i cols时,即要对前面的所有列的高度进行遍历,将下一个图片放在合适的位置。 else{ //首先在数组中找到高度最低的列数。我们都知道有Math.min可以找到最小的数字,但是它接受的参数必须是一组数字,所以在这里我们要用Math.min.apply()方法 var minH = Math.min.apply(null, arrH); //定义一个变量,存放数组中最小的高度 //在找出了最小高度之后,我们需要知道它的索引,才能够为接下来的数据块找到合适的位置,所以在下面又定义了一个找出最小值下标的函数。 //定义一个变量去接受getMinhIndex函数的返回值 var minIndex = getMinhIndex(arrH,minH); //在获得了高度最小的列数的索引后,就可以将下一个元素放到合适的位置 oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minH + 'px'; oBoxs[i].style.left = minIndex * oBoxW + 'px'; //将当前的数据块终于都放到了合适的位置,但不要忘了更新arrH数组 arrH[minIndex] += oBoxs[i].offsetHeight;

附上源代码:

js代码:

window.onload = function(){
 waterFull('main','box');
function waterFull(parent,children){
 var oParent = document.getElementById(parent);
 //var oBoxs = parent.querySelectorAll(".box");
 var oBoxs = getByClass(oParent,children);
 //计算整个页面显示的列数
 var oBoxW = oBoxs[0].offsetWidth;
 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
 //设置main的宽度,并且居中
 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
 //找出高度最小的图片,将下一个图片放在下面
 //定义一个数组,存放每一列的高度,初始化存的是第一行的所有列的高度
 var arrH = [];
 for(var i = 0; i oBoxs.length ; i++){
 if(i cols){
 arrH.push(oBoxs[i].offsetHeight);
 else{
 var minH = Math.min.apply(null,arrH);
 var minIndex = getMinhIndex(arrH,minH);
 oBoxs[i].style.position = 'absolute';
 oBoxs[i].style.top= minH + 'px';
 oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
 // oBoxs[i].style.left = arrH[minIndex].;
 arrH[minIndex] += oBoxs[i].offsetHeight; 



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何抠图