@Isotope

简介 Overview

. 用于动态创建网格布局

. 根据指定的关键字，分类汇总内容，如过滤、排序

. 支持 CDN 和 Package 模式引入库

. 支持使用 Vanilla JavaScript 原生 JS 和 jQuery 初始化实例并使用；也可以不使用js直接初始化HTML

. 进入官网 - Isotope，参照文档，创建自己的效果

功能 Functionality

过滤 Filtering - 匹配的项目显示，否则不显示；默认选择所有

{ filter: '*' }

排序 Sorting - 根据项目的数据排序；默认不排序

{ sortBy: '' }

布局 - 可以是瀑布流 masonry、行fitRows、垂直 vertical等

根据关键字过滤/分类显示指定内容

引入库 - CDN 方式

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

待选项 - 通过类名区分；item是基类，决定样式，web、js、html、css是分类依据

<div class="item-wrap">
  // 预留辅助节点
  <div class="item web h5"><img alt="" src="/utils/view/view0.jpg" /></div>
  <div class="item web css"><img alt="" src="/utils/view/view2.jpg" /></div>
  <div class="item web js"><img alt="" src="/utils/view/view3.jpg" /></div>
  <div class="item css"><img alt="" src="/utils/view/view4.jpg" /></div>
  <div class="item h5"><img alt="" src="/utils/view/view5.jpg" /></div>
  <div class="item js"><img alt="" src="/utils/view/view7.jpg" /></div>
  <div class="item css"><img alt="" src="/utils/view/view9.jpg" /></div>
</div>

过滤器 - 使用自定义数据 data-filter 指定过滤类，*表示选择所有

<div class="btns-wrap">
  <button class="btn active" data-filter="*">web</button>
  <button class="btn" data-filter=".h5">html5</button>
  <button class="btn" data-filter=".css">css</button>
  <button class="btn" data-filter=".js">javascript</button>
</div>

初始化 - 根据容器类名实例化；指定根容器元素 .item-wrap 和过滤的容器元素 .item

这里采用 fitRows，适合等高的元素项

const iso = new Isotope( '.item-wrap', {
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

可以为待选项指定多个样式类来均匀分布；如js有2项，可以占用48%

<div class="item item48 web js"><img alt="" src="/utils/view/view3.jpg" /></div>

为过滤器绑定事件，获取自定义属性，调用 arrange() 实现过滤

let btns = document.querySelectorAll('.btn');
btns.forEach(btn => {
  btn.addEventListener('click', function (e) {
    console.log(e);
    let filter = e.target.getAttribute('data-filter');
    iso.arrange({
      filter: filter
    });
  })
})

样式

如果不指定间隔，默认情况下，各项挨在一起

为了分开，要计算：每个项的百分比和间隔 gutter

gutter默认单位是像素；可以指定一个预置类来使用百分比；同时显式的配置为使用百分比；调整配置如下

const iso = new Isotope( '.item-wrap', {
  itemSelector: '.item',
  layoutMode: 'fitRows',
  percentPosition: true,
  fitRows: {
    gutter: '.gutter-sizer'
  },
});

.gutter-sizer {
  width: 4%;
}

为了应用分隔，待选项结构上要增加一个辅助子节点 - 重要

<div class="gutter-sizer"></div>

为了垂直方向分隔项目，各项指定一定量的padding；结合 gutter 和每行个数而定

.item {
  width: calc(97% / 4);
  aspect-ratio: 16/9;
  padding: 1%;
}

.gutter-sizer {
  width: 1%;
}