前端必备插件之纯原生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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
javascript常用的方法分享
Jul 01 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python程序如何进行保存
2020/07/03 Python
2014年大学生党课心得体会范文
2014/03/29 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
企业法人代表任命书
2014/06/06 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
骨干教师事迹材料
2014/12/17 职场文书
逃课检讨书
2015/01/26 职场文书
房屋质量投诉书
2015/07/02 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python