Waterfall.js 图片瀑布流布局插件
Waterfall.js
状态：稳定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
当前，当今做此工作的最佳选择是Masonry，但它非常繁重，并且具有jQuery的依赖性。请理解：在大多数情况下这不是问题，但是在性能和页面重量很重要的情况下，最好的情况是尝试其他选择：也许是纯CSS？这是可能的？
这个问题很有道理。是的，存在使用Flexbox或column技巧解决的CSS方法，但是当您不了解数据/结构时，效果不佳。因此，我们必须使用JavaScript。面临的挑战是创建一个不错的算法，无论其结构如何：瀑布将起作用。
然而; 瀑布总是会考虑宽度相同的物品：）
如何得到这个？
使用bower：
$ bower install waterfall.js使用npm：
$ npm install waterfall或下载Waterfall.js
如何使用？
定义网格结构：
<div class="my-grid">
<div class="item">Solid Snake</div>
<div class="item">Riou</div>
<div class="item">Jack Russel</div>
<div class="item">Red</div>
<div class="item">Sonic</div>
<div class="item">Megaman</div>
</div>以您的网格作为参数调用Waterfall函数，让魔术发生:)
waterfall('.my-grid');
// OR
var grid = document.querySelector('my-grid');
waterfall(grid);浏览器支持
 |  |  |  |  |
|---|---|---|---|---|
| 42+✔ | 40+✔ | 8+✔ | 29+✔ | 8+✔ |
转载地址：http://raphamorim.io/waterfall.js/
正文到此结束
- 本文标签： JavaScript
- 版权声明： 本站原创文章，于2021年03月10日由赵恒发布，转载请注明出处
相关文章
该篇文章的评论功能已被站长关闭