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

2024-10-02 02:18:49

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

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

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

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

插件特色

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

先看看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

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

原生js实现瀑布流布局

用js实现瀑布流布局以及通过模拟的数据加载图片,已标记注释效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>瀑布流布局-JS实现</title> </head> <style type="text/css"> *{ margin: 0; paddin
原生JS实现美图瀑布流布局赏析

自pinterest网站爆红以来,国内一度掀起"仿PIN"狂潮,诸如花瓣.蘑菇街等等.正是如此,"瀑布流"式布局受到广大网民的青睐.众多知名JS库,也相继出现"瀑布流"布局插件,譬如jQuery的Masonry插件.KISSY的waterfall插件等.今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的"瀑布流"布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获. 1
原生JS实现响应式瀑布流布局

原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
瀑布流的实现方式（原生js+jquery+css3）

前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <s
原生JS实现瀑布流插件

瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探索之旅. 基础功能实现首先我们定义好一个有 20 张图片的容器, <body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style> </body> <
原生js实现移动端瀑布流式代码示例

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.最近使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTo
前端必备插件之纯原生JS的瀑布流插件Macy.js

这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比较方便,用户可以自定义间距.列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目. 瀑布流布局代表网站就是花瓣网,设计师一定不会陌生的设计网站. 插
js原生瀑布流插件制作

本文实例为大家分享了js原生瀑布流插件制作的具体代码,供大家参考,具体内容如下先看效果和普通的瀑布流是一样的,在调用时制需要传入容器,图片以及图片宽度即可直接生成瀑布流话不多说,看代码,后面说一下思路 1.html以及调用,其中HTML只需要一行 <body> <div class="main"></div> <script src="index.js"></script> <script>
js自定义瀑布流布局插件

瀑布流布局是网页中经常采用的一种布局方式,其布局有如下特点: 瀑布流布局特点: (1)图文元素按列排放 (2)列宽一致,但高度不等 (3)布局过程中将优先向高度最小的列补充数据以下是自定义的一个jQuery瀑布流插件:jquery.myWaterfull.js (function ($) { $.fn.extend({ myWaterfull: function () { var parentWidth = $(this).width(); //获取每行的宽度 var childItems =
原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 CSS样式: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style>
js实现瀑布流的一种简单方法实例分享

下面奉上一则用JS实现瀑布流的方法,望批评. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><
Vue瀑布流插件的使用示例

我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度. 测试页面:Page.vue 模板页面:WaterFollow.vue 和 WFColumn.vue 在Page.vue中,修改itemW的值,设置每列的最小宽度.例如:itemW="200"(意为200px).list为数组.高度不用设置,:style="{height:item+'px'}"是我为了创造卡片高度加上去的,不加就显示卡片的原来大小. 经测试,created加载数据正常,mount
通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i
JS实现瀑布流效果

本文实例为大家分享了JS实现瀑布流效果的具体代码,供大家参考,具体内容如下话不多说,直接上代码.如下: CSS部分: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-radius: 4px;} </style> HTML部分(
js实现瀑布流触底动态加载数据

本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码,供大家参考,具体内容如下 // onScrollEvent 滚动条事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一个方块内的内容start <div class="boxItemStyle" v-for="(userTag, i) in dataSource&q

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

相关推荐

随机推荐