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

几点说明

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

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

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

主要的问题在于延时与图片高度计算的冲突，延时加载完成前后图片的高度是会发生变化的，瀑布流函数计算的每列高度不一定准确，定位会出现问题。笔者先尝试过使用绝对定位实现瀑布流布局，但是因为延时加载问题，出来的效果并不是很理想，也尝试过使用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 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代码

*{margin:0;padding:0;}#content{position:relative;margin:0auto;}.box{width:50%;float:left;}.boximg{width:100%;height:auto;display:block;}.left{float:left;}.right{float:right;}