简单淘宝瀑布流展示效果_代码解说

最近看到有个不错，而且常用的js代码，觉得非常不错，就理了一下思路，讲讲他的实现方法。

其效果如图：

代码演示地址：http://www.lzcweb.net/script/waterfall/ 

瀑布流实现过程，主要讲解JS:

HTML文件：

没什么好说的，东西不多，直接看代码。

<div class="box" id="box">

   <ul></ul>

    <divstyle="top: 611px; display: none;" class="bottomLoad"id="bottomLoad">正在加载，请稍后...</div>

</div>

CSS文件：

       运用了CSS3属性，盒子的圆角和阴影 

JS文件：

      1.加载资源（数据），其实真正实用不是例子写的那样，只是作者为了方便演示才写死数据（不过这个关系不大）。

      2.显示效果，设置<li>的位置和设置他的出现效果，此例子中只是用了透明度的变化，每个<li>有自己的setInterval来控制，当opacity为1时清除setInterval。

      3.当右边的滚动条拉到最下时，请求一定数量<li>，如第2步骤显示出来。

只讲部分代码：

需要全部代码去演示地址下