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

最新推荐文章于 2024-04-28 19:58:04 发布

玄东林檎

最新推荐文章于 2024-04-28 19:58:04 发布

阅读量594

点赞数

分类专栏：学习前端文章标签： html 前端

本文链接：https://blog.csdn.net/u013430418/article/details/126129810

版权

学习前端专栏收录该内容

33 篇文章 10 订阅

订阅专栏

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

运行结果

在这里插入图片描述

玄东林檎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML瀑布流布局实现网易LOFTER——masonry响应式网格布局库（非jQuery）

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

扫一扫