您的位置：首页 > 移动开发

基于浮动的移动端两列可延时加载的瀑布流布局

2016-09-17 22:11 423 查看
由于工作需要需要写一个移动端可以延时加载的瀑布流布局页面，于是开始查资料，百度，对瀑布流有了一些理解，一直以来都有写博客的想法，于是有了这篇博文！

几点说明

1.本文所说的瀑布流指的是等宽不等高的瀑布流

2.本问纯属记录用，笔者水平有限，如有错误欢迎指正

3.本文使用的方法可以使用图片延时加载而不会影响瀑布流效果

延时加载瀑布流实现的主要问题

主要的问题在于延时与图片高度计算的冲突，延时加载完成前后图片的高度是会发生变化的，瀑布流函数计算的每列高度不一定准确，定位会出现问题。笔者先尝试过使用绝对定位实现瀑布流布局，但是因为延时加载问题，出来的效果并不是很理想，也尝试过使用onload事件来触发瀑布流函数，但是不知道具体什么原因定位还是不准确。所以为了尽快完成工作任务，使用了本文的这个方式，思想基本相同，只是定位元素位置的方式是使用浮动。因此也局限了瀑布流的列数只能是两列，应对移动端应该是够用了。

瀑布流的几种实现方式

1.绝对定位实现，通过JS计算每一列的高度，然后通过绝对定位来实现每个元素位置的排列以实现瀑布流的形式。

2.将屏幕分成等宽的若干列，每一列都是一个容器，通过计算每个容器的高度，将元素放在高度最低的容器中。

3.使用CSS3的多列布局，这个方法个人认为实现起来比较简单，但是有一个问题，重新加载的内容是页面右侧，而不是在页面下方。想要用这种方法的去百度一下CSS3实现瀑布流网上有很多实例。

本文实现的代码

JS代码如下:

function water(){
var arrBox=$('#content').children('.box');// box对象
var arrBoxH=[];//数组，用于存储左侧列中的所有块框相加的高度
var arrBoxR=[];//数组，用于存储右侧列中的所有块框相加的高度
for(var i=0;i<arrBox.length;i++){      //遍历box
var boxH=arrBox.eq(i).innerHeight(); //获得box的高度
if(i==0){
arrBox.eq(i).addClass("left"); //第一行中的第一个块box添加左浮动（left是自己写好的有float:left属性的选择器名）
arrBoxH[i]=boxH; //第一行中的第一个块box 先添加进数组arrBoxH
}else if(i==1){
arrBox.eq(i).addClass("right");//第一行中的第一个块box添加右浮动
arrBoxR[i]=boxH; //第一行中的第二个个块box 先添加进数组arrBoxR
}else{
var leftNum = arrBoxH.reduce(function (x, y) {
return x + y;
});//计算左侧列的高度
var rightNum = arrBoxR.reduce(function (x, y) {
return x + y;
});//计算右侧列的高度
if(leftNum > rightNum) //比较两侧高度大小，决定为该box添加左浮动还是右浮动
{
arrBox.eq(i).removeClass();
arrBox.eq(i).addClass("box right");  //左侧较高为该box添加右浮动
arrBoxR[i]=boxH;                     //将高度添加在右侧数组
}else {
arrBox.eq(i).removeClass();
arrBox.eq(i).addClass("box left");  //右侧较高为该box添加左浮动
arrBoxH[i]=boxH;                    //将高度添加在左侧数组
}
}
}
}


html代码+css代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瀑布流-jquery</title>
<style>
*{margin:0;padding:0;}
#content{position: relative;margin:0 auto;}
.box{width: 50%;float: left;}
.box img{width: 100%;height:auto;display: block;}
.left{float: left;}
.right{float: right;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
</head>
<body>
<div id="content">
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/1.jpg"></div><!-- box每一个内容块，使用img的onload事件触发瀑布流函数，以免图片尺寸未加载完全影响排列 -->
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/2.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/3.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/4.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/5.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/6.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/7.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/8.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/9.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/10.jpg"></div>
<div class="box"><img onload="water()" class="lazy" src="image/20-1.png" alt="" data-original="image/11.jpg"></div>
</div>
</body>
</html>


第一次写博客，还有许多问题！另外这个方法应该还有很多改进的地方，例如每一次图片加载完成都要触发一次函数来排列，但是由于时间问题以及这个方案的局限性，所以笔者也没有去改进，有兴趣的朋友可以一起讨论！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航