纯原生js的瀑布插件Macy.js 是前端必不可少的插件

这是一个非常轻量级的瀑布插件——Macy.js，纯粹是原生js。现在有很多图片和视频网站，非常适合瀑布流的布局呈现给用户。

这个流布局JS插件只有4KB大小，可以说非常轻量级。配置也方便。用户可以自定义列的间距和数量。另一个特点是它们可以定义不同的屏幕分辨率和不同的列数。该应用程序在响应网页设计中非常方便。

因此，选择一个易用的瀑布js插件，可以让前端工程师快速开发出漂亮的瀑布Pc网站，并对后台项目做出反应。

瀑布流布局代表网站是花瓣网，设计师设计网站不会陌生。

插件功能

重量轻，只有4KB大小，最小版本2KB！可以自定义布局列的数量；纯JS，不需要依赖jQuery库。我们先来看看Macy.js项目案例的截图：

官方网站地址：http://macyjs.com/

以下是具体的使用说明：

步骤1:在页面末尾引入JS文件(不能放在Header)

脚本src=' http : Macy . js '/script step 2: html结构

div id=' Macy-container ' div img src=' http : aa . jpg '/div/div step : configure JS

script var mascot=new Macy({ container : ' # Macy-container '，//image list container id true order : false，等待images: false，调试： true，//设计边距： {x: 10，y: 10}，//设置列数3360 6，//定义不同的分辨率(1200，940，520，400这些是分辨率/script如果使用vue和react，可以使用npm安装macy。射流研究…

Npm安装macygithub仓库地址：https://github.com/bigbitecreative/macy.js

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。