what's
又称瀑布流式布局，是比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局，最早采用的网站是pinterest，后逐渐在国内流行。
how
页面容器内的多个高度不固定的div之间按照一定的间隔和规则定位排序，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。
优点：
1.有效降低了界面复杂度，节省了空间：不再需要臃肿复杂的页面导航链接或者按钮了；
2.在触屏设备上交互方式有更好的用户体验，通过向上滑动进行页面滚动和数据加载，对操作的精准程度要求远远低于点击按钮或者链接；
3.更高的参与度，使用户能更好的专注于浏览而不是操作；
缺点：
1.无限滚动只适用与特定类型产品中的某一类型，如某类微博信息，购物网站的某类商品，而不适用与一般的门户网站，使用需斟酌；
2.需要打造额外的js库来保证页面数据的加载和排列，而这在一定意义上增加了在网页的性能和设备兼容等方面的问题；
简单版：
HTML
.content {
position: relative;
text-align: center;
margin: 0 auto;
}
.item {
width: 180px;
margin-right: 10px;
margin-top: 10px;
transition: all 1.5s;
float: left; /*美化*/
}
.box1 {
height: 300px;
background-color: red;
}
.box2 {
height: 200px;
background-color: hotpink;
}
.box3 {
height: 150px;
background-color: gray;
}
.box4 {
height: 400px;
background-color: orange;
}
.box5 {
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<div class="content">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box1">3</div>
<div class="item box2">4</div>
<div class="item box4">5</div>
<div class="item box5">6</div>
<div class="item box2">7</div>
<div class="item box3">8</div>
<div class="item box1">9</div>
<div class="item box2">10</div>
<div class="item box5">11</div>
<div class="item box4">12</div>
</div>
</body>
瀑布流的特点之一就是等宽不等高，因此我们统一给div块设置同样的宽度，再用class改变高度。
因为最后需要使用定位布局，所以.content绝对定位position:relative，.item相对定位position:absolute。
当然，这样一来所有块框都会堆在一起，可以使用float:left来”美化“一下；
现在的界面是这样的：
对没错，很杂乱无序（本来也就是这样）。
瀑布流布局的思想就是：
- 首先计算当前窗口下，能放置多少个相同宽度的块框，确定个数后，依次将元素填入，如图中，最多只能填充10个，也可以说，页面被分为了10列。
第11号元素由于位置不够，只能即时放置末尾下方，但这不是我们想要的。 -
之后，在第一行中选择高度最低的元素那一列，将不够放置的下一个元素填上去，同时，增加此列的高度。
循环这个过程，就形成了我们看到的瀑布流布局。
如图，11之所以放置在8号下方，是因为第一行中1~10内，8号高度最低，所以11号放置在8号下方，当然，放置后，8号所在那一列所在的高度应该是8号的高度+11号的高度。此时，到12号寻找位置，2,4,7号高度都是最低的，那么将从2号下方开始放置，放置后，2号所在列的高度也会增加。
不难想，13号元素将会从4号下方放置，然后循环这个过程.........
js核心思路：
1.编写方法：获取容器内所有外层元素，存入数组；
2.编写方法：计算容器内一行可以承载多少个元素，方法：容器宽度/元素宽度，四舍五入向下取整；
3.编写方法：把每一行中所有元素的高度值存入数组；
4.编写方法：在高度值数组中找到最小高度值；
5.编写方法：把第二行第一个元素定位到上一行所有元素中高度最低的元素下面，即设置该元素的top，left，position属性；
6.编写方法：重置当前高度值数组中的最小值；
7.编写方法：从第二行第一个元素开始，遍历每个元素，用上述方法重新定位每个元素的位置，把该事件绑定到页面；
8.编写方法：监听鼠标事件，当前容器内最下面一个元素的offsetTop<浏览器可视高度+已滚动高度时，加载下一页数据；
9.加载完之后，用上述方法重新定位新加载元素的位置；
// 取得元素宽度
var width = $(".item").eq(0).outerWidth();
// 取得容纳的列数
var colsLength = Math.floor($(".content").width() / width);
// 创建高度存放数组
olute",
top:hArr[minIndex],
left:$(this).outerWidth(true) * minIndex // 等于当前元素的宽度 * 位置
})
// 更新元素列高度
hArr[minIndex] += $(this).outerHeight(true); // 等于放置上去的元素的高度,不断循环
})
这样就算是完成一个简陋版的瀑布流布局了。
还可加入动画，检测用户窗口改变时进行重绘。
JS-bin
网友评论