文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > 头条 > 正文

超轻量级网页流布局JS插件Macy.js

小云云
发布： 2017-11-09 09:53:59
原创
2987人浏览过

今天给大家推荐一款非常好用的 macy.js 插件，它是一款流布局js插件，使用流布局来展示图片，这种排版方式特别适合展现大量图像的页面，而且macy.js 插件仅仅只有4kb大小。

Macy.js 插件配置也比较方便，用户可以根据自己的需求自定义间距、列数以及不同屏幕分辨率。

 项目地址：http://macyjs.com/

图片2.png

插件特色

· 轻量级，只有4KB的大小，min版仅2KB！

· 布局列数可自定义配置;

· 纯JS，不需要依赖 jQuery 库.

 图片3.png

使用教程

 Step 1: 在页尾引入JS文件，（不能放在Header里哦）

<script src="macy.js"></script>
登录后复制

Step 2: HTML结构

<div id="macy-container">
<div >
@@##@@
</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>
登录后复制

 

怎么样大家喜欢这个插件吗？赶紧get起来吧！

超轻量级网页流布局JS插件Macy.js
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：PHP、JAVA、NET 开发语言之间的比较 下一篇：如何用html5 写出网页音乐播放器
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
今日头条视频下载保存的方法 今日头条视频怎么下载保存 有三种方法可供选择：1、使用第三方下载工具：下载专门的今日头条视频下载工具，输入视频链接或复制到剪贴板中，选择视频质量和保存路径即可下载。2、使用屏幕录制软件：安装屏幕录制软件，播放视频并开始录制，确保只录制视频区域，录制完成后，视频会储存在设备图库中。3、使用浏览器扩展：在浏览器中安装今日头条视频下载扩展，访问今日头条网站播放视频，点击扩展图标选择下载，确认下载即可。
2024-12-27 14:02:20
5423
astr币前景怎么样 ASTR 作为一种加密货币具有巨大的潜力。其快速交易速度、低成本和可扩展性使其成为日常支付和交易的理想选择。然而，在投资 ASTR 之前，投资者应了解潜在的挑战和风险。
2024-06-28 10:43:03
1422
2023年最流行的10款前端UI框架排名 今天我们来探讨一下：2023年最流行的10款前端UI框架排名。前端UI框架是一种基于HTML、CSS、JavaScript等前端技术的开发工具集，提供了一系列的UI组件、样式、布局等基础功能，使得前端开发人员可以更加高效地开发出具有良好用户体验的Web应用。
2023-04-12 14:53:43
21983
金三银四找工作，我来帮你改简历！ 最近不是所谓的金三银四了嘛，就有朋友找我帮忙改下简历，所以就整理了一下我对简历格式、排版、文案等方面的看法。【纯属个人看法】编辑器里面不好排版，所以就用了截图来代替~
2023-04-10 16:11:33
5825
这10条建议能提高你工作效率！（经验总结） 最近看到一个关于工作效率的问题，这里系统整理下自己总结的一些经验。有一个跟工作效率有点像的词汇：生产效率。生产效率指的是单位时间内的有效产出，想要生产效率高，要么做事的“质”和“量”更高，要么缩短所花费的时间。
2023-04-04 17:03:07
6222
令人惊艳的4个ChatGPT项目，开源了！ 自从 ChatGPT、Stable Diffusion 发布以来，各种相关开源项目百花齐放，着实让人应接不暇。今天，着重挑选几个优质的开源项目分享给大家，对我们的日常工作、学习生活，都会有很大的帮助。
2023-03-30 14:11:42
7010
20多年后，我仍爱着PHP和JavaScript！ 在过去的二十年间，从 C 到 Common Lisp，从 Java 到 Python，从 C++ 到 TypeScript，我在工作中用过十多种编程语言，但我却偏偏对那些质量堪忧的语言情有独钟。
2023-03-24 09:03:13
6443
Google Bard 开放申请了 Google Bard 申请内测地址：https://bard.google.com/，目前只支持英语，需要使用美国代理申请，另外只懂英文、不会编程，一次性给多种答案。
2023-03-22 10:36:26
6174
“文心一言”正式发布，百度股价大跳水！ 3月16日，百度「文心一言」发布了！「文心一言」的整场发布会，总体感觉就是太过潦草了，感觉准备的不够充分，发布会有点为了开发布会而开发布会了。
2023-03-16 17:02:13
3321
0基础学PHP有多难？技巧分享 但是任何一门技术，如果轻易就能够让人学会，那也不会称作为技术，因为那样，工作的可替代性太强了技术，只有难学才会更有价值。对于零基础的同学来说，学习php肯定是非常需要毅力的，任何语言的学习都不可能一蹴而就，而是需要花大量时间，消耗大量精力才能学会的！
2023-03-16 16:32:20
3980
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部