使用masonry.js实现简单的自动响应式瀑布流布局


masonry.js 是一个瀑布流jquey插件,它可以根据可用的垂直空间将元素置于最佳的位置,也就是我们所说的瀑布流。

简单的演示

https://demo.shaosiming.net/masonry/index.html

开始使用

首先引入masonry.js文件 (文章最下方可以下载所有文件)

<script src="../js/masonry.js"></script>

然后创建包含它的容器

<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item grid-item--width2">...</div>
    <div class="grid-item">...</div>
    ...
</div>

容器的大小由你的CSS控制

.grid-item {
    width: 200px;
}

.grid-item--width2 {
    width: 400px;
}

使用jquey进行初始化

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

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});

完整的演示文件下载

本站CDN加速下载



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/javascript/15.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主