文章の目录
一、引入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^)\\\~~~谢谢各位读者们啦
(^_^)∠※！！！
