jQuery实现简单瀑布流布局

WaterFull

最近正在实习，痛苦的实习日子，不过学到了超多。。。。
前几天刚好在做网页的瀑布流布局，本来使用的是masonry.js插件，但倒霉的是这个插件对jQuery版本有所限制，公司模板使用的是2.1.0，然而mosonry并不理会这的版本的jQuery，任性的很。。无奈之下，用高版本jQuery进行替换，结果不幸的是，另一小伙伴在该项目中使用的另一个插件开始报错，估计是嫌这个jQuery版本太高。。。好的吧，都难伺候，不如自己来写一个
昨天老板检查说不行，他需要用瀑布流布局，并同时每个item顺序不能改变。。好吧，还要改，不过这个版本的还是想在博客中记录下来^^

先放成果图：

原理：先将容器div的position要设置为relation，之后的每个item个都将以absolute的形式安放在容器中，这样的话item的位置就可以轻松用top和left安放。我这个例子中，每个item都是等宽的，这样难度系数又下降了很多（哈哈。。不等宽的有机会再去实现吧）。安放分两种，第一种是第一行的那些item，他们top都直接设为0就好，left则是他们的个数乘以他们的宽度；第二种是除去第一行的其他行，他们则是先去找数组中的最小高度（数组：放置每一列此时的高度），top就是那最小高度，而left则是数组下标（也就是第几列（0,1,2…））

HTML代码：

<div id="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    ...
</div>

CSS代码：
（css代码并不全，这要看个人所写内容决定了，不过重要的都在下面了）

#grid {
    position: relative;
}
.item {
    position: absolute