前端必备插件之纯原生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
投稿猜你喜欢
- 本文实例讲述了Python实现替换文件中指定内容的方法。分享给大家供大家参考，具体如下：这里使用python编写的程序，实现如下功能：将文件
本文实例为大家分享了PHP实现简易计算器的具体代码，供大家参考，具体内容如下老规矩，先上GIF动态图，看个效果，如果符合你的项目或者确定你要- 简单说下原理，把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下，设置<img
- 我们知道，C++和python各有优缺点，C++可以直接映射到硬件底层，实现高效运行，而python能够方便地来进行编程，有助于工程的快速实
- 刚开始使用django，在创建第一个app时被提示不知道命令runserver，百度得出是环境变量的问题。1、配置python变量环境，C:
- python 调用系统ffmpeg进行视频截图，并进行图片http发送ffmpeg ，视频、图片的各种处理。 最近在做视频、图片
- 今天我要为大家介绍的是XPath，XPath是导航和查询XML文档的语言。我们从一个函数开始。UpdateXML()函数我们已经花了很多时间
- Mysql慢查询解释MySQL的慢查询日志是MySQL提供的一种日志记录，它用来记录在MySQL中响应时间超过阀值的语句，具体指运行时间超过
- 前言：支付宝 2022 集五福活动正式开启数据显示，过去六年累计参与支付宝集五福的人数已经超过了 7 亿，每 2 个中国人里就有 1 个曾扫
- 目前市面上成熟的CMS产品有很多，无外乎两种解决方案：第一种就是用XSL+XML的方式来实现客户端具体数据；第二种是生成HTML或者SHTM
- 1：构图图形的层次感图形和元素之间的层次感，可以在干扰视觉的同时，突出自身所想体现的主题，这种表现方式往往是比较直接而且有效的方式。我们所说
- 之前总结过flask里的基础知识，现在来总结下flask里的前后端数据交互的知识，这里用的是Ajax一、 post方法1、post方法的位置
- 一、队列基本操作from queue import Queueq = Queue(5) # 创建一个容量为5的队列。如果给一个小
- Variant变量一般会将其代表的数据子类型自动转换成合适的数据类型,但有时候,自动转换也会造成一些数据类型不匹配的错误.这时,可使用转换函
- 在图片处理过程中，有时候我们想要确定图片中某一像素的坐标，可以通过下面方法得到。点击运行程序，用鼠标点击我们想要获取坐标的区域，即可获得其坐
- Python是一种非常富有表现力的语言。它为我们提供了一个庞大的标准库和许多内置模块，帮助我们快速完成工作。然而，许多人可能会迷失在它提供的
- 前言最近使用pytorch训练模型，保存模型后再次加载使用出现了一些问题。记录一下解决方案！一、torch中模型保存和加载的方式1、模型参数
- 在公司的工作经常要为客户作产品展示的页面，由于客户上传的图片格式大小不一，缩放后会导致变形，于是在星期天抽了点时间，写了一段JS代码，支持图
- 一、Less/Scss变量换肤具体实现：1、初始化vue项目2、安装插件：npm install style-resources-loade
- 一、前言很多网站提供视频转GIF的功能，但要么收费要么有广告实际上我们通过python，几行代码就能够实现视频转gif二、教程1. 安装必备
