waterFall

功能描述

瀑布流的制作

依赖模块

无

快速使用

JS调用

  1.     var box = document.getElementById('box');
  2.         var items = box.children;
  3.         // 定义每一列之间的间隙 为10像素
  4.         var gap = 10;
  6.         window.onload = function() {
  7.             // 一进来就调用一次
  8.             waterFall();
  9.             // 封装成一个函数
  10.             function waterFall() {
  11.                 // 1- 确定列数  = 页面的宽度 / 图片的宽度
  12.                 var pageWidth = getClient().width;
  13.                 var itemWidth = items[0].offsetWidth;
  14.                 var columns = parseInt(pageWidth / (itemWidth + gap));
  15.                 var arr = [];
  16.                 for (var i = 0; i < items.length; i++) {
  17.                     if (i < columns) {
  18.                         // 2- 确定第一行
  19.                         items[i].style.top = 0;
  20.                         items[i].style.left = (itemWidth + gap) * i + 'px';
  21.                         arr.push(items[i].offsetHeight);
  23.                     } else {
  24.                         // 其他行
  25.                         // 3- 找到数组中最小高度  和 它的索引
  26.                         var minHeight = arr[0];
  27.                         var index = 0;
  28.                         for (var j = 0; j < arr.length; j++) {
  29.                             if (minHeight > arr[j]) {
  30.                                 minHeight = arr[j];
  31.                                 index = j;
  32.                             }
  33.                         }
  34.                         // 4- 设置下一行的第一个盒子位置
  35.                         // top值就是最小列的高度 + gap
  36.                         items[i].style.top = arr[index] + gap + 'px';
  37.                         // left值就是最小列距离左边的距离
  38.                         items[i].style.left = items[index].offsetLeft + 'px';
  40.                         // 5- 修改最小列的高度 
  41.                         // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
  42.                         arr[index] = arr[index] + items[i].offsetHeight + gap;
  43.                     }
  44.                 }
  45.             }
  46.             // 页面尺寸改变时实时触发
  47.             window.onresize = function() {
  48.                 waterFall();
  49.             };
  50.             // 当加载到第30张的时候
  51.             window.onscroll = function() {
  52.                 if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
  53.                     // 模拟 ajax 获取数据    
  54.                     var datas = [
  55.                         "./image/03.jpg",
  56.                         "./image/04.jpg"
  57.                     ];
  58.                     for (var i = 0; i < datas.length; i++) {
  59.                         var div = document.createElement("div");
  60.                         div.className = "item";
  61.                         div.innerHTML = '<img src="' + datas[i] + '" alt="">';
  62.                         box.appendChild(div);
  63.                     }
  64.                     waterFall();
  65.                 }
  67.             };
  68.         };

特别说明

样式修改及用例详见 index.html。