文章の目录
一、引入js二、向元素添加 data-masonry 属性,选项可以被设置成 JSON三、初始化四、项目效果写在最后Masonry
一、引入js
<script src="/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 selectorvar msnry = new Masonry(".grid", {// options...});
四、项目效果
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;
\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;
~~~///(^v^)\\\~~~
谢谢各位读者们啦
(^_^)∠※
!!!