前端必备插件之纯原生JS的瀑布流插件Macy.js


Posted in Javascript onNovember 22, 2017

这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。

这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦。配置也比较方便,用户可以自定义间距、列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的。

所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目。

瀑布流布局代表网站就是 花瓣网,设计师一定不会陌生的设计网站。

插件特色

  1. 轻量级,只有4KB的大小,min版仅2KB!
  2. 布局列数可自定义配置;
  3. 纯JS,不需要依赖 jQuery 库.

先看看Macy.js的项目案例截图吧:

前端必备插件之纯原生JS的瀑布流插件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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
让你30分钟快速掌握vue3教程
Oct 26 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
浅谈Angular 中何时取消订阅
Nov 22 #Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 #Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 #Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 #Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 #Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
jquery json 实例代码
2010/12/02 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
五年级英语教学反思
2014/01/31 职场文书
动员大会主持词
2014/03/20 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
党员个人自我评价
2015/03/03 职场文书
求职信格式范文
2015/03/19 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis