开源瀑布流插件Masonry.js: 轻松在你的网站实现瀑布流布局【网页设计】

前言

最近在帮朋友做一个网页毕业设计，刚好有个页面需要用到瀑布流布局, 为了研究市面上比较成熟的瀑布流方案, 我在github上找呀找, 突然, 发现了一款设计非常巧妙的方案——Masonry.

Masonry 在 github 上非常火, 目前已有 16.4 star, 有很多网站都采用它的方案实现瀑布流布局.

那么接下来我就带大家研究一下这个库, 并快速应用到自己的项目中.

实现教程

1.首先我们先写一个基础的 HTML 结构

<div class="grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>

2.接着往每个盒子里添加一张图片，来看看效果

3.引入 Masonry

在项目中引入 Masonry 的 JavaScript 文件来初始化瀑布流布局了，你可以通过 CDN 或 npm 安装

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

npm install masonry-layout

4.初始化 Masonry

通过 JavaScript 激活 Masonry：

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});
 
// 元素参数是一个选择器字符串
var msnry = new Masonry( '.grid', {
  // options
});

来看看效果

使用起来就是这么简单, 当然文档上还有很多高级用法, 我们也可以学习参考一下

https://masonry.desandro.com/

项目地址

https://github.com/desandro/masonry