Web前端实现瀑布流的几种方法

瀑布流效果图如下：

前端实现瀑布流的方法很多,其中最简单的就是用CSS实现，其次是通过jQuery实现，最麻烦的就是js，那么就从最麻烦的开始吧$_$

不管用哪种方法去实现瀑布流效果，html文件里的写法都是相同的，特别是body里的写法，简直是一毛一样的。先把html里的内容粘贴如下：

JS实现瀑布流效果

不管是什么语言，实现瀑布流效果的基本思路都是一样的，具体的我就不说了，只聊干货，上代码。

下面看下CSS里面的处理，还是直接粘贴代码如下：

基本的处理搞完了，下面就是最最重要的js处理了。

首先在html文件的head标签里导入js文件，如下：

<!--引入js代码--> <script src="js/index.js"></script>

为了实现瀑布流效果，我们需要把已有的数据先按照瀑布流效果排列好，先来一个实现瀑布流的函数，有详细的步骤注释，粘贴如下：

$函数是自定义的函数，根据id获得标签

还有一个获取数组中特定值的脚标的函数

在网页加载完毕的onload函数中调用实现瀑布流的函数，第一个参数是最外层的div标签的id="main"，第二个参数是每个盒子div标签的类名class=“box”。

下面要考虑加载更多新图片了，在此就写成静态数据进行加载。首先先判断什么时候加载，我的判断是，当浏览器页面的偏移量加上浏览器的高度大于加载的最后一个盒子的头部偏移量的时候，加载新的数据。实现函数如下：

判断过，需要加载数据的话，就加载新的数据咯

OK，js实现瀑布流效果搞定了。

jQuery实现瀑布流效果

首先要保证你有jQuery文件，然后导入jQuery文件，css文件跟js实现瀑布流效果是一样的，就不重新粘贴一遍了。重点的还是我们自己写的js实现文件，道理跟js实现是一样的，所以我连函数名起得都一样，不多说，两个主要的函数直接粘贴如下：

实现瀑布流函数

判断是否加载的函数

加载数据

OK，jQuery实现瀑布流效果搞定了。

CSS实现瀑布流效果

现在可以把前面的都忘掉了，最简单的实现方式来了。这个是没有js文件的，只需要修改css文件就行，直接粘贴代码：

OK，css实现瀑布流效果搞定了。

纳尼？就三行？对，就三行！这三行堪比三行情书！！！

@IMWeb前端社区

本文由作者莽原奔马668授权转发

http://www.jianshu.com/p/d4ca937c6f96

微信：IMWebTech