前端必备插件之纯原生JS的瀑布流插件Macy.js
作者:admin 发布时间:2024-02-27 09:05:59
标签:Macy.js,瀑布流插件
这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。
这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦。配置也比较方便,用户可以自定义间距、列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的。
所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目。
瀑布流布局代表网站就是 花瓣网,设计师一定不会陌生的设计网站。
插件特色
轻量级,只有4KB的大小,min版仅2KB!
布局列数可自定义配置;
纯JS,不需要依赖 jQuery 库.
先看看Macy.js的项目案例截图吧:
官网地址: http://macyjs.com/
下面就是具体的使用说明:
Step 1: 在页尾引入JS文件,(不能放在Header里哦)
<script src="macy.js"></script>
Step 2: HTML结构
<div id="macy-container">
<div >
<img src="aa.jpg" />
</div>
</div>
Step 3: 配置JS
<script>
var masonry = new Macy({
container: '#macy-container', // 图像列表容器id
trueOrder: false,
waitForImages: false,
useOwnImageLoader: false,
debug: true,
//设计间距
margin: {
x: 10,
y: 10
},
//设置列数
columns: 6,
//定义不同分辨率(1200,940,520,400这些是分辨率)
breakAt: {
1200: {
columns: 5,
margin: {
x: 23,
y: 4
}
},
940: {
margin: {
y: 23
}
},
520: {
columns: 3,
margin: 3,
},
400: {
columns: 2
}
}
});
</script>
如果你使用了vue和react,可以采用npm安装macy.JS
npm install macy
github仓库地址:https://github.com/bigbitecreative/macy.js
来源:http://www.25xt.com/html5css3/16554.html
0
投稿
猜你喜欢
- 一、安装相关的模块首先第一步的话我们需要安装相关的模块,通过pip命令来安装pip install gif另外由于gif模块之后会被当做是装
- NopCommerce为了实现松耦合的框架设计目的,使用了IOC框架:Autofac。据有人测试,Autofac是性能很好的IOC工具。1、
- 本文实例讲述了Python队列RabbitMQ 使用方法。分享给大家供大家参考,具体如下:目前的exchange的路由策略是:每个需要队列的
- 0x01春节闲着没事(是有多闲),就写了个简单的程序,来爬点笑话看,顺带记录下写程序的过程。第一次接触爬虫是看了这么一个帖子,一个逗逼,爬取
- 最近游戏项目在多个国家上线,每个国家都对应两份儿svn目录(一份是本地策划目录,一份是线上目录)。于是乎维护变得很烦躁。需要先更新本地策划s
- 一、使用三种方法实现0-n累加求和定义函数分别使用while循环、for循环、递归函数实现对0-n的累加求和1、使用while循环定义一个累
- 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图
- 初识defaultdict之前在使用字典的时候, 用的比较随意, 只是简单的使用dict.然而这样在使用不存在的key的时候发生KeyErr
- 啥都不说了,直接奉献原代码 代码如下:'==========注意==================================
- 一、环境win10、Python3.6、OpenCV3.x;编译器:pycharm5.0.3二、实现目标根据需要追踪的物体颜色,设定阈值,在
- 在JAVASCRIPT中LEFT函数的等价函数:function left(mainStr,lngLen) {if&nb
- python的os module中有fork()函数用于生成子进程,生成的子进程是父进程的镜像,但是它们有各自的地址空间,子进程复制一份父进
- 两种方法拼接#img = np.vstack((img, img2)) # vstack按垂直方向,hstack按水平方向img
- 在编写 XMLHttpRequest 请求时,需要掌握服务器端返回的内容。针对 Firefox 浏览器,我们常用的 Firebug 就能非常
- 数据库优化是一项很复杂的工作,因为这最终需要对系统优化的很好理解才行。尽管对系统或应用系统的了解不多的情况下优化效果还不错,但是如果想优化的
- 利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀!呵呵,这句话见的太多了。好在什么地方呢?听我慢慢道来。从开始接
- 本文实例讲述了Python过滤列表用法。分享给大家供大家参考,具体如下:过滤列表[mapping-expression for elemen
- 1、sqldmo SQLDMO是操作SQLServer的理想的方式,如果您的数据库是SQLServer就可以考虑使用这种方式。在C#中使用S
- 方法一 通过GridView(简评:方法比较简单,但是只适合生成格式简单的Excel,且无法保留VBA代码),页面无刷新aspx.cs部分u
- 数据预处理在解决深度学习问题的过程中,往往需要花费大量的时间和精力。 数据处理的质量对训练神经网络来说十分重要,良好的数据处理不仅会加速模型