HTML5 使用原生JS创建瀑布流

由于是新手第一次写，所以废话不多说，直接奔主题，今天就来说说瀑布流的那些事，近来各大网站都喜欢用瀑布流来布局，瀑布流已经成为一种非常流行的页面布局了，尤其是一些购物网站，不论是移动端还是我们前端，用参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。例如：

瀑布流样板

     好了，在开始写代码之前，我们先来分析一下瀑布流布局的几大步骤：

1.让父盒子水平居中显示(#main)

** 1.1.设置盒子的width

** 1.2.设置盒子的margin(0 auto)

 2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位

 3.判断什么时候加载后续的其他盒子条件

 4.当满足第三部的加载其他盒子的条件的时候,如果加载出新数据(造数据)

---

 分析完了，那么下面直接上代码了：

一。先布局

先从css布局开始：父盒子中间有一个大的盒子，然后再套一个小盒子用来装img标签放图片，首先把大盒子多复制几个，最好复制15个以上，因为如果到时候图片出来显示不满第一屏，就没有右边滚动条，我当时就是图片放少了，没有滚动条，无法继续往下滚动来看效果的。

1

这里我直接贴代码了

*{

margin:0;

padding:0;

}

img

{

/*去掉图片之间的缝隙*/

vertical-align:top;

}

#main

{

position:relative;

}

.box

{

/*background: red;*/

float:left;

padding:10px0 0 10px;

}

.pic

{

padding:10px;

border:1px solid#cccccc;

border-radius:8px;

box-shadow:0 0 10px#ddd;

background:#ffffff;

}

.picimg

{

width:160px;

}

二。JS部分

前面我们分析了瀑布流的布局：

1.让父盒子水平居中显示(#main)

** 1.1.设置盒子的width

** 1.2.设置盒子的margin(0 auto)

父盒子居中显示

这里的waterFlow是对瀑布流布局封装的一个方法，具体实现步骤：

1.获取所有的盒子 2.求出任何一个盒子的宽度 3.求出当前屏幕宽度 4.求出每一行显示的盒子 5.让父盒子进行居中显示（在任何屏幕下都居中）

瀑布流布局1

2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位

下面是遍历所有子盒子：

1 2 3

3.判断什么时候加载后续的其他盒子条件

注意：这里我们用到的方法是依最后一个盒子高度出来一半的时候就加载后面的盒子！

4

4.当满足第三部的加载其他盒子的条件的时候,如果加载出新数据(造数据)

注意：加载完新数据要再次调用waterFlow这个方法

1 2

github地址：github.com/guoshilin/-JavaScript