HTML瀑布流布局——masonry响应式网格布局库（非jQuery）

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

常见瀑布流布局网站

鼻祖：Pinterest
通用类：豆瓣市集，花瓣网，我喜欢，读图知天下
美女图片：图丽网
时尚资讯类：看潮网
时尚购物类：蘑菇街，美丽说，人人逛街，卡当网
品牌推广类：凡客达人
家居o2o类：新巢网小猫家
微博社交类：都爱看
搞笑图片类：道趣儿
艺术收藏类：微艺术
潮流图文分享：荷都分享网

特点

优点

1、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。

2、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

3、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

缺点

有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
额外的复杂度：
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。
再见了，页脚：
如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。
最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。
千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。
SEO：

集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。

关于页面数量的印象：
其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。

masonry实现瀑布流布局

masonry是一个响应式网格布局库（非jQuery）。（Cascading grid layout library）

如果使用CSS+JavaScript当然可以实现瀑布流布局，但相对麻烦，masonry是一个javascript插件，通过该插件可以轻松实现瀑布流布局，和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理不同高度的元素在垂直方向的间隙。

官网：http://masonry.desandro.com/

源码：https://github.com/desandro/masonry

下载并引用masonry

可以去官网或github下载“masonry.pkgd.min.js”，将下载到的插件添加到项目中，并在页面中添加引用，如下所示：

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

准备内容

<ul id="grid" class="clearfix"><li class="grid-item"><div class="img"><img src="./images/content/li/lofter_1659401965640.png" alt=""></div><div class="title"><div class="p"><p>要命，那帅哥是谁</p></div><div class="more"><span></span><span></span><span></span></div></div><div class="tag"><span>#迪卢克</span></div><div class="author"><div><span class="touxiang"></span><span class="name">不倒貉貉</span></div><div><span class="like"><!--  --><i></i>8.4K</span></div></div></li><li class="grid-item"><div class="img"><img src="./images/content/li/lofter_1659405863448.png" alt=""></div><div class="title"><div class="p"><p>官图双子真的是太可爱啦！！</p></div><div class="more"><span></span><span></span><span></span></div></div><div class="tag"><span>#原神</span></div><div class="author subcrible"><div><span class="subcribletag">订阅</span></div><div><span class="like"><!--  --><i></i>8.4K</span></div></div></li><li class="grid-item"><div class="img"><img src="./images/content/li/八岐大蛇.jpg" alt=""></div><div class="title"><div class="p"><p>为阴阳师画的工作搞解禁</p></div><div class="more"><span></span><span></span><span></span></div></div><div class="tag"><span>#阴阳师</span></div><div class="author"><div><span class="touxiang"></span><span class="name">BITE咬鸽鸽</span></div><div><span class="like"><!--  --><i></i>2.6K</span></div></div></li><li class="grid-item"><div class="img"><img src="./images/content/li/Wedjat.jpg" alt=""></div><div class="title"><div class="p"><p>初めてのルーブルは</p></div><div class="more"><span></span><span></span><span></span></div></div><div class="tag"><span>#恩奇都</span></div><div class="author"><div><span class="touxiang"></span><span class="name">Wedjat eyes</span></div><div><span class="like"><!--  --><i></i>90K</span></div></div></li><li class="grid-item"><div class="img"><img src="./images/content/li/不知火.png" alt=""></div><div class="title"><div class="p"><p>怀着朦胧爱意，做缱绻的诗句</p></div><div class="more"><span></span><span></span><span></span></div></div><div class="tag"><span>#恩奇都</span></div><div class="author subcrible"><div><span class="subcribletag">订阅</span></div><div><span class="like"><!--  --><i></i>8.4K</span></div></div></li></ul><script>var grid = document.querySelector('#grid');var msnry = new Masonry(grid, {itemSelector: '.grid-item',});</script>

原生JavaScript：

var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {// options...itemSelector: '.grid-item',columnWidth: 200
});

使用HTML属性：

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'><div class="grid-item"></div><div class="grid-item"></div>...
</div>

常用属性如下：

itemSelector : '.item',//瀑布流布局中的单项选择器
columnWidth : 240 ,//一列的宽度
isAnimated:true,//使用jquery的布局变化，是否启用动画
animationOptions:{//jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,//是否适应宽度 Boolean
isResizableL:true,//是否可调整大小 Boolean
isRTL:false,//是否使用从右到左的布局 Boolean

运行结果

HTML瀑布流布局实现网易LOFTER——masonry响应式网格布局库（非jQuery）相关推荐

css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
响应式网格项目动画布局_响应式网格及其实际使用方式：常见的UI布局
响应式网格项目动画布局重点 (Top highlight) 第二部分 (Part II) Now that you have a basic understanding of how to use ...
响应式网页布局 - W3Schools How-Tos 01
W3Schools教学系列 W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML.CSS.JavaScript等的详尽教学,还可以把它当作说明文件(Documents).有经验的前端 ...
element-UI响应式（布局原理）讲解 - 贴文篇
element-UI响应式(原理)- 讲解 element-UI官方说明:响应式布局参照了 Bootstrap 的响应式设计,预设了五个响应尺寸:xs.sm.md.lg 和 xl. Element ...
响应式设计布局要不要了解一下？
写在前面我们正在跑步进入移动互联网时代,所以针对移动环境下web开发响应式设计成为发展的一个必然的趋势.所以这几天一直没更新文章,也是在准备怎么写关于这个响应式设计,毕竟用可以,但是想写的明白还是需 ...
Flexbox响应式网页布局 - W3Schools视频02
今日继续W3Schools响应式网页布局的实现,采用Flexbox方案.使用Flexbox实现响应式网页布局是目前最流行的做法.如果你对Flexbox并不熟悉,可以查看W3Schools的教学: W3 ...
html六边形布局,CSS3-纯CSS响应式六边形网格布局
hexagons.css是一款纯CSS3响应式六边形网格布局系统.通过hexagons.css预设的样式,可以非常轻松的制作出六边形图片网格布局.它的特点还有: 六边形网格会根据容器的宽度自动调整. ...
bootstrap响应式网页布局
bootstrap可以说是没有布局和审美概念的后端狗的福利.使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式的布局.看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给 ...

HTML瀑布流布局实现网易LOFTER——masonry响应式网格布局库（非jQuery）