JS实现瀑布流布局

思路

  1. 页面布局为:图片容器盒子相对定位,其中的所有图片绝对定位
  2. 定义一个布局函数,在页面加载时以及窗口大小发生变化时调用该函数
  3. 列数为:图片外层盒子宽度/图片实际所占宽度(图片宽度+边框+内外边距)
  4. 每列的高度存放在一个数组中,数组的长度即为列数
  5. 遍历所有图片集合,给每一张图片定位
  6. 找出数组中最小值对应的索引,即为高度最小的列
  7. 该图片的left值设为:高度最小的列数*图片实际所占宽度
  8. 该图片的top设为:高度最小的列的高度
  9. 该图片定位完毕后,将该图片的实际所占高度添加到之前高度最小的列中

代码实现

  • 布局实现

    <!--布局相对很简单,图片容器设为相对定位,所有图片放在容器中,设为绝对定位-->
    <div class="waterfall">
      <img src="ava01.jpg" alt="">
      <img src="bg01.jpg" alt="">
      <img src="bg02.jpg" alt="">
      <img src="bg03.jpg" alt="">
      <img src="bg04.jpg" alt="">
      <img src="bg04.jpg" alt="">
      .......
    </div>
  • 功能实现

    // 当页面加载或窗口大小改变,调用设置布局函数
    $(window).load(setLayOut);
    $(window).resize(setLayOut);
    // 定义设置瀑布流布局方法,当页面加载或窗口大小改变时调用该方法
    function setLayOut() {
      // 获取列数
      var cols = parseInt($('.waterfall').width() / $('img').outerWidth(true));
      // 定义存放每一列的高度的数组
      var colsHeight = [];
      // 根据列数初始化每一列高度为0
      for (var i = 0; i < cols; i++) {
          colsHeight[i] = 0;
      }
      // 设置每张图片的位置
      $('img').each(function () {
          // 计算高度最小的列数和高度
          var minHeight = colsHeight[0];
          var min = 0;
          for (var i = 1; i < colsHeight.length; i++) {
              if (colsHeight[i] < minHeight) {
                  minHeight = colsHeight[i];
                  min = i;
              }
          }
          // 为图片设置样式
          $(this).css({
              top: minHeight,
              left: min * $('img').outerWidth(true)
          });
          // 为当前列增加高度
          colsHeight[min] += $(this).outerHeight(true);
      })
    }

效果

瀑布流

暂无评论

发送评论 编辑评论


				
上一篇
下一篇