前端必备插件之纯原生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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
javascript中var的重要性分析
Feb 11 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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程序中的常见漏洞进行攻击
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python设置随机种子实例讲解
2019/09/12 Python
python enumerate内置函数用法总结
2020/01/07 Python
opencv+python实现均值滤波
2020/02/19 Python
在python image 中实现安装中文字体
2020/05/16 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
新闻编辑自荐信
2013/11/03 职场文书
九年级化学教学反思
2014/01/28 职场文书
小学生家长评语大全
2014/02/10 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
冬季安全检查方案
2014/05/23 职场文书
企业负责人任命书
2014/06/05 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书