jquery实现瀑布流

什么是瀑布流： 瀑布流 --- 瀑布流式布局

他是一种网站的布局方式，随着滚轮的滚动，他会不断的加载数据块，附着在尾部

瀑布流式布局的特点：

-琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列

-唯美：以唯美的图片为主

-操作简单：只需要滚动鼠标，就可以查看内容

-有效降低界面复杂度，节省空间

-对触屏设备来说，操作方式更符合直觉

-更高的参与度

***************************************一定要复习的部分就是css   一定要复习*********************************

 

瀑布流的核心思想：

首先我们要知道，瀑布流式一种布局的方式。从上到下，跟着来的一种方式，以图片为主。

我们的第一行图片确定之后，第二行图片要依次放在第一行图片高度最小的那一个下面，这样

我们的页面看起来就非常的紧凑。

代码核心思想：

通过js去设置样式，完成定位。

第一行确定之后，我们要找出高度最小的那一张图片。获得他的左边距和高度。利用这个值对接下来的图片

进行定位。     接下来的图片我们使用绝对定位，左边距上边距利用上面的值设置。就完成了下一行第一张图片跟在

第一行高度最小图片的下面。 注意此时我们把这两个图片的高度相加，作为新的高度。

第二行第二张图片与上面的原理一样，还是去找第一行最矮的图片。由于第一次最矮的图片与第二行第一张高度

相加，此时他已经不是最小的了。我们找出最小的，再得出他的左边距，上边距 ，利用这个值再去设置第二行第二张图片

依次的去设置图片，我们就完成了瀑布流的效果。

一定要自己再去写一遍瀑布流的效果。复习完css之后。

不断的在最小高度的图片下面追加图片。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery中没有控制json数据的机制  所以我们使用json数据利用的都是 javascript

瀑布流追加效果实现：

-------------------------------------------------------------------------------------------------------------------------------------------

关于瀑布流的梳理：

1，如何排列图片？我们要的效果是，例如第一排是五张图片，那么第二排第一张图片就放在第一排，高度最小的图片下面

以此类推。

为此我们需要获取到的参数有：

-每张图片的宽度

-窗口的宽度

-每一行放几张图片

-容器一行多宽  根据图片宽度 * 个数

然后我们设置窗口的宽度，完成后我们要开始获取哪一个图片的高度最小，此时我们通过循环遍历，将第一排的图片高度

存入数组，然后在这个数组中找出最小高度，获得他的索引。通过这个索引我们就知道第一排哪个高度最小。然后通过索引

找到这个元素的左边距。

根据找到的 高度和左边距，来设置第六章图片的位置，然后将第六章图片的高度与第一排最小高度合并。

进入下一次循环。下一次循环i的值是1，他依然小于第一排个数，我们会继续向下排列。

此时我们解决了第一个问题，十八张图片都排列完毕。

------然后我们解决追加

追加时我们使用的是虚拟数据，利用json  和 append 函数，向wrap中追加盒子。函数的触发我们使用的是滚轮滚动事件，

所以滚轮滚动我们就向下追加。利用for循环来控制追加哪一个图片。

在这里我们虽然完成了追加但新追加的并没有瀑布流效果，我们在次调用 排列函数，将所有盒子都传递进去，就完成了瀑布流的

排列。

在这里我们要注意，滚动就追加这样无限制的下去，浏览器会崩溃的。所以我们的追加是有条件的。

追加条件： 窗口高度 + 滚轮高度 > 最后一列的高度。说明我们页面超出范围了，此时追加。

一开始我们的样式写在追加函数中，这样每调用一次，就会改变样式一次，效果不好。

所以我们将样式函数封装。当图片的数目大于我们的所有图片时，我们不加效果，反正也看不见。当小于时我们在加相应的

效果。

这样就完成了瀑布流式布局。

=================================================================================================