瀑布流布局

作者: zy懒人漫游 | 来源:发表于2018-02-05 02:13 被阅读0次

瀑布流布局的学习
瀑布流、木桶布局
瀑布流照片墙布局
CSS经典布局
瀑布流
瀑布流布局_木桶布局
瀑布流和懒加载结合
瀑布流
瀑布流
瀑布流的三种实现

这是html，首先先定义一个容器ct，里面的div模拟照片，每张照片的宽度一样，高度不一样

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="ct">
  <div class="item h1">1</div>
   <div class="item h2">2</div>
   <div class="item h3">3</div>
   <div class="item h2">4</div>
   <div class="item h1">5</div>
   <div class="item h3">6</div>
   <div class="item h2">7</div>
   <div class="item h2">8</div>
   <div class="item h3">9</div>
   <div class="item h1">10</div>
   <div class="item h1">11</div>
   <div class="item h2">12</div>
   <div class="item h2">13</div>
   <div class="item h1">14</div>
   <div class="item h2">15</div>
</div>
</body>
</html>

function waterFull() {
  var $ctWidth = $('.ct').width(), //获取容器宽度
    $nodeWidth = $('.item').width(), //获取每个节点宽度
    colLength = parseInt($ctWidth / $nodeWidth), //获取页面每一行数量
    itemArr = []; //初始化数组
  for (var i = 0; i < colLength; i++) {
    itemArr[i] = 0; //遍利数组
  }
  $('.item').each(function() {
    var minValue = Math.min.apply(null, itemArr); //获取最小值
    var minIndex = itemArr.indexOf(minValue); //获取最小的索引值
    $(this).css({ //定义位置
      top: itemArr[minIndex], //
      left: $(this).outerWidth(true) * minIndex
    });
    itemArr[minIndex] += $(this).outerHeight(true);
  });
}

1、定义好瀑布流函数，
2、然后获取容器的宽度，和每个节点的宽度，因为我们要得到容器里面有几列，初始化数组，让item为0
3、遍历节点数组
4、通过Math.min.apply(null, itemArr)获取到最小值，和最小值的下标
5、最上面开始摆放最小值的下标对应的值，往左偏移的距离是最小的那个的宽度
6、数组的最小值的高度变化

最后还可以优化下代码，将代码进行封装

var Render = (function () {
      function init() {
        waterFull();
        $(window).resize(function () { //窗口尺寸每次变化，执行一次瀑布流
          waterFull();
        });
      }
      function waterFull() {
        var $ctWidth = $('.ct').width(),//获取容器宽度
          $nodeWidth = $('.item').width(),//获取每个节点宽度
          colLength = parseInt($ctWidth / $nodeWidth),//获取页面每一行数量
          itemArr = [];//初始化数组
        for (var i = 0; i < colLength; i++) {
          itemArr[i] = 0;//便利数组
        }
        $('.item').each(function () {
          var minValue = Math.min.apply(null, itemArr);//获取最小值
          var minIndex = itemArr.indexOf(minValue);//获取最小的索引值
          $(this).css({//定义位置
            top: itemArr[minIndex],//
            left: $(this).outerWidth(true) * minIndex
          });
          itemArr[minIndex] += $(this).outerHeight(true);
        });
      }
      return {
        init: init
      };
    })();
    Render.init();

瀑布流布局的实现