web前端-瀑布流的实现方案

瀑布流是一种布局方式, 当我们滑动的时候需要继续加载下面的内容.

---

布局html

<div class='container'>
  <div class='box'>
    <div class='pic'>
      ![](图片地址)
    </div>
  </div>
<div class='box'>
    <div class='pic'>
      ![](图片地址)
    </div>
  </div>
<div class='box'>
    <div class='pic'>
      ![](图片地址)
    </div>
  </div>
<div class='box'>
    <div class='pic'>
      ![](图片地址)
    </div>
  </div>
...
</div>

样式

* {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
}

.container .box {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
}

.container .box .pic {
    width: 180px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 8px;
    box-shadow: 0 0 5px #000;
}

.box .pic img {
    width: 100%;
}

在不写 js 脚本的情况下布局应该是如下这样:

图片1

分析

1. 首先获取能放几列图片
   1.1. 列数 = parseInt( 浏览器宽度 / 图片的宽度);
2. 设置最外层盒子container的宽度, 宽度 = 列数 * 图片的宽度
3. 设置.container盒子居中显示, 使用属性margin: 0 auto;
4. 我们要实现的效果是如下图中的效果:

效果图

5. 这样我看可以分析出, 第一行的图片和没使用 js 处理前是一样的, 这样我们就只需要把第一行后面的图片一次布局到指定位置就可以了.
6. 什么是指定位置呢?
   6.1 我们需要找出第一行中最短的那个盒子, 把下一个盒子定位到这个盒子下面, 之后我们在重新计算最短的盒子, 再把下一个放到这个最短的盒子下面.

js 脚本

window.onload = function(){
  // 获取到 `container`标签
  var container = document.getElementById('container');
  // 获取屏幕宽度
  var sw = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
  // 获取每张图片的宽度
  var imgW = container.children[0].offsetWidth;
  // 获取最多多少列
  var cols = parseInt(sw / imgW);
  // 重新设置`container`的宽度, 并设置居中
  container.style.margin = '0 auto';
  container.style.width = imgW * cols;

  // 开始计算位置
  var heightArr = [];
  for(var i = 0, len = container.children.length; i< len ; i++){
    var child = container.children[i];
    if(i < cols) { // 说明是第一行
        // 如果是第一行, 就把第一行中的每个盒子的高度添加到数组中.
        heightArr.push(child[i].offsetHeight);
    } else { // 说明是其他的盒子
        // 计算第一行中高度最短的值, 只要取出我们在数组中添加的高度的最小即可
        // 此处用到了 Underscore.js库的.min 函数(求数组中最小的值)
        var minHeight = _.min(heightArr);// 获取数组中最小的值
        // 获取最小高度在数组中的索引
        var minHeightIndex = heightArr.indexOf(minHeight);// 取到数组中最小值的索引
      // 设置盒子的位置, 因为要设置位置所以需要将盒子的`position`设置成`absolute`
      child.style.position = 'absolute';
      child.style.left = minHeightIndex * imgW + 'px';
      child.style.top = minHeight + 'px';

      // 加了一个盒子之后, 我们需要更新数组中最小高度的值
      heightArr[minHeightIndex] += child.offsetHeight;
    }
  }
}

以上代码纯手工编写, 每借助任何工具, 不是复制粘贴, 如有错误可自行改正.
有了js 之后效果应该可以和效果图中的效果一样了.

---

下一步我们就是对滚动事件进行监听了, 当发生滚动的时候, 我们需要在发送请求到服务器, 将数据返回之后, 我们重新布局即可.

这里就说到这. Demo 地址