JS、JQ、CSS3三种方法实现瀑布流布局
此文主要介绍三种(JS,JQ,CSS3)实现瀑布流布局的方法(三种方法均可自适应窗口):
此三种方法HTML部分均相同,所以先贴出HTML部分,该部分比较简单:使用简单的ul>li就好,需要注意的是,li需要足够多,以让窗口出现滚动条,滚动滚动条后加载图片
<ul class="main" id="main"> <li class="box"> <div class="pic"> <img src="img/0.jpg"/> </div> </li>//n个li标签 </ul>
现在加上简单的样式就好,JS与JQ方法实现的CSS样式相同:(当然CSS样式随性就好)
1 1 *{ 2 2 margin: 0; 3 3 padding: 0; 4 4 box-sizing: border-box; 5 5 -webkit-box-sizing: border-box; 6 6 -moz-box-sizing: border-box; 7 7 } 8 8 .main{ 9 9 margin: 0 auto; 10 10 position: relative; 11 11 } 12 12 li{ 13 13 list-style: none; 14 14 display: block; 15 15 float: left; 16 16 } 17 17 li,.pic{ 18 18 padding: 20px 10px; 19 19 } 20 20 .pic{ 21 21 box-shadow: 0px 0px 5px #777; 22 22 border-radius: 10px/10px; 23 23 } 24 24 img{ 25 25 width: 180px; 26 26 display: block; 27 27 border: 0; 28 28 border-radius: 5px/5px; 29 29 box-shadow: 3px 3px 5px #777; 30 30 }
好啦,现在进入正题,实现瀑布流布局效果
方法一:JS实现
代码如下 :
1 window.onload=function(){ 2 var parent=document.getElementById('main');//获取id为main的元素 3 var boxArr=parent.children;//获取所有li.box 4 var windowW=document.documentElement.clientWidth || document.body.clientWidth;//获取窗口宽度 5 var imgData= {'data': [{'src':'31.jpg'},{'src':'32.jpg'},{'src':'26.jpg'},{'src':'24.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'}]}; 6 //滚动条事件 7 window.onscroll=function(){ 8 if (checkLoad(boxArr)) { 9 for(var i in imgData.data){ 10 var oBox = document.createElement('li'); 11 oBox.className = 'box'; 12 oBox.innerHTML = '<div class="pic"><img src="img/'+imgData.data[i].src+'"></div>'; 13 parent.appendChild(oBox); 14 } 15 waterFall(parent,boxArr,windowW);//加载出来的图片,再次调用图片排列函数 16 } 17 } 18 waterFall(parent,boxArr,windowW);//调用函数图片排列函数 19 } 20 //窗口改变事件 21 window.onresize = function(){//窗口大小改变时自动调整图片列数 22 var parent=document.getElementById('main');//获取id为main的元素 23 var boxArr=parent.children;//获取所有li.box 24 var windowW=windowW=document.documentElement.clientWidth || document.body.clientWidth; 25 waterFall(parent,boxArr,windowW); 26 } 27 //排列图片位置 28 function waterFall(parent,boxArr,windowW){ 29 var boxW=boxArr[0].offsetWidth;//获取单个box宽 30 var cols=Math.floor(windowW/boxW);//计算图片列数 31 parent.style.width=boxW*cols+'px'; 32 var hArr=[];//存储li.box所有高度 33 for (var i in boxArr) { 34 if (i<cols) {//获取第一行 所有高度 35 hArr[i]=boxArr[i].offsetHeight; 36 } else{ 37 var minH=Math.min.apply(Math,hArr);//获取最小hArr 38 var minHIndex=getMinHIndex(hArr,minH);//获取最小hArr值索引 39 boxArr[i].style.cssText+='position:absolute;top:'+minH+'px;left:'+minHIndex*boxW+'px;';//将后一张图片放在最小高度图片之后 40 hArr[minHIndex]+= boxArr[i].offsetHeight; //添加元素之后更新hArr,获取最小高度 41 } 42 } 43 } 44 //获取最小hArr值索引 45 function getMinHIndex(arr,val){ 46 for(var i in arr){ 47 if (arr[i]==val) return i; 48 } 49 } 50 //判断是否满足加载图片条件 51 function checkLoad(boxArr){ 52 var lastBoxH=boxArr[boxArr.length-1].offsetTop;//最后一张图片刚要出来时加载之后的图片 53 var windowH = document.documentElement.clientHeight || document.body.clientHeight; 54 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 55 return lastBoxH<windowH+scrollTop? true:false;//最后一张图片高度小于窗口高度+滚动条高度时,加载图片 56 }
方法二:JQ实现,与JS实现原理相同,
还是直接贴代码吧:
1 $(window).load(function(){//如果写成$(document).ready(),表示文档准备就绪,图片并未加载,获取到图片高度均为0 2 var parent=$('#main'); 3 var windowW=$(window).width(); 4 var jsonImg={'data':[{'src':'31.jpg'},{'src':'32.jpg'},{'src':'26.jpg'},{'src':'24.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'}]} 5 $(window).on('scroll',function(){ 6 if (checkLoad(parent.children())) { 7 for(var i in jsonImg.data){ 8 var oBox=$('<li class="box"></li>'); 9 oBox.html('<div class="pic"><img src="img/'+jsonImg.data[i].src+'"/></div>'); 10 parent.append(oBox); 11 } 12 waterFall(parent,windowW); 13 } 14 }) 15 waterFall(parent,windowW); 16 }); 17 //窗口改变事件 18 $(window).resize(function(){ 19 var parent=$('#main'); 20 var windowW=$(window).width(); 21 waterFall(parent,windowW); 22 }); 23 function waterFall(parent,windowW){ 24 var boxW=parent.children().eq(0).outerWidth(); 25 var cols=Math.floor(windowW/boxW); 26 parent.css({'width':boxW*cols}); 27 var hArr=[]; 28 parent.children().each(function(index,dom){//遍历数组 29 if (index<cols) { 30 hArr[index]=$(dom).outerHeight(); 31 } else{ 32 var minH=Math.min.apply(null,hArr); 33 var minHIndex=$.inArray(minH,hArr);//获取最小值下标 34 $(dom).css({'position':' absolute','left':minHIndex*boxW,'top':minH}); 35 hArr[minHIndex]+= $(dom).outerHeight(); 36 } 37 }); 38 } 39 //判断是否加载 40 function checkLoad(boxArr){ 41 var lastBoxH=boxArr.last().offset().top; 42 var windowH=$(window).height(); 43 var scrollTop=$(window).scrollTop(); 44 return lastBoxH<(windowH+scrollTop)?true:false; 45 }
方法三:CSS实现,使用column属性,使用多兰布局,与JS,JQ的css几乎一样,只是在ul中加了column属性 ,当然,滚动滚动条,图片的加载还需要通过JQ或JS来实现,增加的样式如下:
1 .main{ 2 margin: 0 auto; 3 position: relative; 4 margin: 0 auto; 5 column-width:200px; 6 -webkit-column-width:200px; 7 -moz-column-width:200px; 8 }
这样就简单记录了一下三种实现瀑布流布局的方法