ajax-瀑布流布局

瀑布流布局
ajax-瀑布流布局

实现思路

• 首先发送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;
    });