三种瀑布流实现

真的很想多在这里分享些出行记录，但无奈生活乏味实在难以支撑更新

尝试着整理下自己杂乱无章的浏览器书签吧，将有收获的记录收藏以供未来查阅

本站点原主题为《Follow》，后进行了部分功能改进：

• 左下角增加了音乐播放器；
• 全站引用了 AJAX（放置切换页面音乐中断播放）；
• 重写了原瀑布流代码（AJAX 影响了原瀑布流展示，页面切换后手动刷新瀑布流才正常）；
• 部分 CSS 样式优化；
• 底部 footer.php 修改；
• 其他；

其中，瀑布流实现方式参考《分享一次纯 css 瀑布流 和 js 瀑布流》，若需浏览【图文版】请移步至原文

首先定义一段结构，用以呈现下述三种实现方式

<div class="masonry"> 
  <div class="item"> 
    <img class="lazy" src="images/1.jpg" alt="" />
  </div> 
  <div class="item"> 
    <img class="lazy" src="images/2.jpg" alt="" />
  </div>
  <div class="item"> 
    <img class="lazy" src="images/3.jpg" alt="" />
  </div>
  <div class="item"> 
    <img class="lazy" src="images/4.jpg" alt="" />
  </div>
  <div class="item"> 
    <img class="lazy" src="images/5.jpg" alt="" />
  </div>
</div>

纯 css 写瀑布流

multi-columns 方式

通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局

.masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数） 和 column-gap（列间距）

item 中设置 break-inside:avoid，这是为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

在 css 中设置包裹 masonry 和 item 的属性样式：

.masonry { 
  -moz-column-count: 3; /* Firefox */
  -webkit-column-count: 3; /* Safari 和 Chrome */
  column-count: 3;
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em;
}
.item { 
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

flexbox 方式 （flex布局）

在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行

.masonry { 
  display: flex; 
  flex-flow: column wrap;
}
.item { 
  break-inside: avoid;
}

这里关键是 要显式的设置容器高度，让 .masonry 容器的高度和浏览器视窗高度一样，否则容器无法包裹住项目列表

js 写瀑布流

使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列，若需要从左到右排列只能通过 js 实现

js 实现方式是通过 css 的绝对定位实现（根据每张图片的位置设置 top 和 left 值）

<style>
.masonry { 
  position:relative;
  width: 100%;
}
.item { 
  position: absolute;
  overflow: hidden;
}
.item img{
  width: 100%;
  height: 100%;
}
</style>

重点：js 瀑布流实现方式

// 瀑布流效果
// 这里有一个坑（已经修复）：
// 因为是动态加载远程图片，在未加载完全无法获取图片宽高
// 未加载完全就无法设定每一个 item(包裹图片)的 top。

// item 的 top 值：第一行：top 为 0
// 其他行：必须算出图片宽度在 item 宽度的缩小比例，与获取的图片高度相乘，从而获得 item 的高度
// 就可以设置每张图片在瀑布流中每块 item 的 top 值（每一行中最小的 item 高度，数组查找）
// item 的 left 值：第一行：按照每块 item 的宽度值*块数
// 其他行：与自身上面一块的 left 值相等
function waterFall () {
  // 1- 确定图片的宽度 - 滚动条宽度
  let pageWidth = getClient().width-8;
  let columns = 3; // 3 列
  let itemWidth = parseInt(pageWidth/columns); // 得到item的宽度
  $(".item").width(itemWidth); // 设置到item的宽度

  let arr = [];

  $(".masonry .item").each(function(i){
    let height = $(this).find("img").height();
    let width = $(this).find("img").width();
    let bi = itemWidth/width; // 获取缩小的比值
    let boxheight = parseInt(height*bi); // 图片的高度*比值 = item的高度

    if (i < columns) {
      // 2- 确定第一行
      $(this).css({
        top:0,
        left:(itemWidth) * i
      });
      arr.push(boxheight);
    } else {
      // 其他行
      // 3- 找到数组中最小高度  和 它的索引
      let minHeight = arr[0];
      let index = 0;
      for (let j = 0; j < arr.length; j++) {
        if (minHeight > arr[j]) {
          minHeight = arr[j];
          index = j;
        }
      }

      // 4- 设置下一行的第一个盒子位置
      // top值就是最小列的高度 
      $(this).css({
        top:arr[index],
        left:$(".masonry .item").eq(index).css("left")
      });

      // 5- 修改最小列的高度 
      // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
      arr[index] = arr[index] + boxheight;
    }
  });
}

// clientWidth 处理兼容性
function getClient() {
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  }
}

// 页面尺寸改变时实时触发
window.onresize = function() {
  // 重新定义瀑布流
  waterFall();
};

// 初始化
window.onload = function(){  
  // 实现瀑布流
  waterFall();
}