一、引入js

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

二、向元素添加 data-masonry 属性，选项可以被设置成 JSON

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/1.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/2.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/3.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/4.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/5.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/6.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/7.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/8.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/9.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/10.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/11.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/2.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/4.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/8.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/10.jpg" alt="Some image" /></a></div><div class="grid__item"><a class="grid__link" href="#"><img class="grid__img" src="img/1.jpg" alt="Some image" /></a></div>
</div>

三、初始化

通过原生JavaScript

// init with selector
var msnry = new Masonry(".grid", {// options...
});

四、项目效果

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Masonry系列之网格瀑布流加载动画特效相关推荐

照片墙瀑布流加载与阻止加载
网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高,这样,前端不必等待图片渲染完成,可以根据图片的宽高先把装载图片的容器或父节点先放上页面,完成基础性的布局,再让图片以渐变或其他 ...
js图片加载效果（延迟加载+瀑布流加载）
概述两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果详细代码下载:http://www.demodash ...
微信小程序--瀑布流加载
本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...
图片瀑布流加载和购物车
图片瀑布流加载注释中为详细注释动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示下载资源: 28 次下载资源下载积分: 20 积分 js代码 var ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...

Masonry系列之网格瀑布流加载动画特效

文章の目录

一、引入js

二、向元素添加 data-masonry 属性，选项可以被设置成 JSON

三、初始化

四、项目效果

写在最后

Masonry系列之网格瀑布流加载动画特效相关推荐

最新文章

热门文章