瀑布流布局的简单应用

瀑布流布局，简单说，就是按列向下展开，每一列只有固定宽度，没有固定高度。用平时的布局方法肯定不能满足需求，如果仅仅是布局倒也好说，但又要读取数据的时候，就稍麻烦一点。

简单说一下原理：

利用绝对定位，将每一块数据输出到指定列上。也就是说，需要计算每一块数据的LEFT和TOP值。

计算各列高度，将最新的数据块输出到高度最小列上。

OK，就是这么个意思。

可以看看DOM

方法：

因为是简单的应用，所以不考虑自适应屏幕宽度的问题，这里使用4列的模式。因为要用到每一列的高度，所以先定义一个数组，用来存放每一列的高度值

var lie=new Array(0,46,46,46);

这里给了初始值，因为设计要求，第二、三、四列的启始高度有这么高。

因为每一列的宽度是固定的，所以每一列的LEFT就可以先定下来，这个根据设计的需求设定，也用一个数组来存放每一列的LEFT值。都用数组的好处是可以用key值来调用

var _left=new Array(0,234,468,702);

SO，各列的LEFT值，一目了然

说说计算各列高度的最小值，其实很简单，lie数组里存的就是高度，只要找到数组lie中的最小值，就可以了，下面是代码

    function getMin(){        for(_x in lie){            if(_x==0){                _t=lie[_x];                _k=_x;            }else{                if(_t>lie[_x]){                    _t=lie[_x];                    _k=_x;                }            }        }    }

_t用来存放最小值，然后和后一个值做比较，_t大，则将小值付给_t，这个数组遍历结束，_t就是最小值了。但我们不用这_t值，我们要用的是它的下标，因为下标代表着1、2、3、4列。所以在每次给_t付值的时候，都将下标_x付给_k，这样结束的时候，_k自然就是高度最小的列了。

现在获取到了高度最小的列，那就要将新的数据块输入到这一列的最后，结合两个数组的下标和值，就可以计算出数据块的LEFT和TOP值，代码如下：

function setPosition(thisHeight){    hot_city_left=_left[_k]+'px';    hot_city_top=lie[_k]?lie[_k]+10+'px':lie[_k]+'px';    lie[_k]=lie[_k]?lie[_k]+thisHeight+10:lie[_k]+thisHeight;    maxHeight=lie[_k]>maxHeight?lie[_k]:maxHeight;}

参数thisHeight是获取到的这个最新数据块的高度，因为把它输入到列上了，还得算出新列的高度，代码第三行，就是在做这个工作。为了效果，每一个数据块相对于它的上一块，都加了10像素的距离。

说说这个maxHeight，因为绝对定位，底部的内容是不会被自动撑开的，所以，利用maxHeight这个值和新数据块的高度+原来列的高度做比较，如果新值大，就将新值附给maxHeight，这样就能保持maxHeight最大，那再加50像素，就永远碰不到底了。

主要就是这么点东西，下面是全部代码：

var maxHeight=0;var _x,_t=0,_k=0;var lie=new Array(0,46,46,46);var _left=new Array(0,234,468,702);var hot_city_left=0,hot_city_top=0;var minNum;moveItem();function moveItem(){    $(".hot_city_area").each(function(){        getMin();        setPosition($(this).height());        $(this).css({'position':'absolute','left':hot_city_left,'top':hot_city_top});    });    $(".hot_city").css('height',maxHeight+50+'px');}function getMin(){    for(_x in lie){        if(_x==0){            _t=lie[_x];            _k=_x;        }else{            if(_t>lie[_x]){                _t=lie[_x];                _k=_x;            }        }    }}function setPosition(thisHeight){    hot_city_left=_left[_k]+'px';    hot_city_top=lie[_k]?lie[_k]+10+'px':lie[_k]+'px';    lie[_k]=lie[_k]?lie[_k]+thisHeight+10:lie[_k]+thisHeight;    maxHeight=lie[_k]>maxHeight?lie[_k]:maxHeight;}

一句话解释：$(".hot_city_area").each，遍历每一个数据块，计算高度最小列，计算LEFT和TOP值，重设列高和maxHeight，然后调用$(this).css({'position':'absolute','left':hot_city_left,'top':hot_city_top});设置新数据块的LEFT和TOP，最后用$(".hot_city").css('height',maxHeight+50+'px');设置父元素的高度。

下面是效果：

这里只是讲了布局的排列方法，还有向下滚动自动读取什么的，就不说了，反正ajax读出数据，再利用上面的方法将数据块一个一个输出到列上，就OK了。主要是注意不要重置前面已经输出过的数据块，不然，越向下滚，需要处理的数据块就越来越多。

还有一个是用$(this).height()来获取新数据块的高度，因为有的浏览器在加载图片的时候，没有设置预定高度，像chrmoe，那DOM在加载的时候，就很可能没有把图片的高度计算在内，或是计算错误，这种情况，需要给IMG一个高度。这个可以利用后端代码处理数据的时候，就处理掉。下面是PHP的示例：

$size=getimagesize($v['photo']);if($size[0]<217){    $h=$size[1];    $w=$size[0];}else{    $h=217*$size[1]/$size[0];    $w=217;}$v['style']='width:'.$w.'px;height:'.$h.'px';

就是获取原始图片的高宽，然后和目标宽度做比较（因为宽度是固定的），之后根据目标宽度值计算图片的高度，再将宽度和高度直接输出到IMG上，这样就不会计算错误了。