前端必备插件之纯原生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 删除/替换DOM元素的几种方式
May 20 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
js实现延迟加载的方法
Jun 24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
jquery 选择器部分整理
2009/10/28 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
Python3 Random模块代码详解
2017/12/04 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
大学生秋游活动方案
2014/02/17 职场文书
志愿者活动总结范文
2014/04/26 职场文书
检讨书怎么写
2015/05/07 职场文书
小学教学工作总结2015
2015/05/13 职场文书
消防宣传标语大全
2015/08/03 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python