实现思路
- 首先发送ajax请求获取数据，对获取到的数据采用瀑布流布局
- 当页面滚动到了底部时，发送一个请求给服务器，用于获取数据，获取到数据后再对数据采用使用瀑布流布局
瀑布流布局实现思路
- 获取列数（通过容器的宽度除以每列的宽度就等于h数）
- 设置一个数组，用于存储每一列的高度，数组长度为列数，先将各个元素的值初始化为0
- 当有新数据到来时，遍历数组中的所有项，取得高度最小的那一列，然后将新数据放在高度最小的那一列中，并更新数组
判断页面滚动到了底部
有两种方式来判断：
- 方法1
该方法有兼容性问题，各浏览器对于offsetHeight 的解释不同，需要进行测试，chrome下测试没有问题
代码：window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { getData(renderPage); } };
- 方法2
在html中文档的最后添加一个标签，将该标签loadMore设置为hidden，当页面滚动时，判断该标签是否出现在可视窗口，如果出现了，则说明页面滚动到了底部，
判断方法：当窗口滚动的高度（scrollTop） + 窗口的高度（window.innerHeight） 大于 loadMore标签在页面的偏移高度（ $loadMore.offset().top;）
代码：
// html
.load-more{
visibility: hidden;
margin: 3px;
height: 3px;
}
// js
function isVisible(){
var scrollTop = $(window).scrollTop(),
winH = window.innerHeight;
offsetTop = $loadMore.offset().top;
if (offsetTop < scrollTop + winH){
return true;
} else {
return false;
}
}
注意点
- 页面中的各个列使用的是
position: absolute绝对定位，导致它们的包裹容器脱离了普通文档流，因此，当有新的内容加入时，需要手动设置它的包裹容器的高度为所有列中的最高高度 - 图片资源的加载
当接收到服务器端的数据时，因为网络原因，可能导致图片资源不能立马加载完成，所以，在实际编码中，先创建节点资源，等待图片资源加载完成后，再将节点插入到页面中；或者可以考虑使用预加载方式。
在下面的代码中，我们通过判断节点的img是否加载完成，如果加载完成了就将其插入到页面中；
代码：
$node.find('img').load(function(){
insertNode($node);
pinterestLayout($node);
isDataArrive = true;
});
