流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流

最新推荐文章于 2023-10-05 09:21:46 发布
最新推荐文章于 2023-10-05 09:21:46 发布
阅读量1.8k 收藏 11
点赞数 2
文章标签： javascript css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingshuangtu/article/details/119428532
版权

文章目录

瀑布流的定义

瀑布流是什么?
1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
2、唯美：图片的风格以唯美的图片为主。
3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前有一个软件叫瀑布流。
4.瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。国内大部分网站的图片展现方式均使用瀑布流

一、实现效果

在这里插入图片描述

代码

首先是用javascript自己手写代码实现照片瀑布流

var list=document.getElementById("list").children;
            for(var i=0;i<list.length;i++){
                if(i<5){
                    list[i].style.top="0px";
                }
                else{
                    list[i].style.top=list[i-5].offsetHeight+20+parseInt(list[i-5].style.top)+"px";


                }
                list[i].style.left=i%5*284+"px";
            }

实现思路：
设置数组list获取所有ul下的li，给所有照片使用绝对定位absolute，并控制其宽度为你想要的宽度，相对定位为ul.当设置5组照片流时，将照片类型分为两种，第一种是下标0-4的照片，其距离顶部的距离为0（top=0;）,第二种是下标大于等于5的照片，其距离顶部的距离为其上面的照片（下标[i-5]）的高度加间距加上面的照片距离顶部的距离
即ist[i].style.top=list[i-5].offsetHeight+20+parseInt(list[i-5].style.top)+“px”;

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
				margin:0px;
				padding: 0px;
			}
			ul{
				width:1400px;
				margin:0px auto;
				position: relative;
			}
			ul>li{
				width:264px;
				list-style: none;
				border: 1px solid #000;
				box-sizing: border-box;
				padding:10px 15px;
				position: absolute;
			}
			ul>li>img{
				width:100%;
			}
    </style>
</head>
<body>
    <div class="box">
        <ul id="list">
            <li>
                <img src="./img/iu4.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu3.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu4.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu4.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu3.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu.png" alt="">
                <span>111111</span>
            </li>
            <li>
                <img src="./img/iu2.png" alt="">
                <span>111111</span>
            </li>
        </ul>
    </div>
    <script>
        window.onload=function(){
            var list=document.getElementById("list").children;
            for(var i=0;i<list.length;i++){
                if(i<5){
                    list[i].style.top="0px";
                }
                else{
                    list[i].style.top=list[i-5].offsetHeight+20+parseInt(list[i-5].style.top)+"px";


                }
                list[i].style.left=i%5*284+"px";
            }
        }
    </script>
</body>
</html>

img
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用插件Mary.js照片流插件实现照片瀑布流

前言：纯原生JS的瀑布流插件Macy.js，是前端必备插件
选择一款简单易用的瀑布流js插件，可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目

1.该插件地址（点击链接跳转首页）：http://macyjs.com/
2.github仓库地址（点击链接跳转下载页面）：https://github.com/bigbitecreative/macy.js
3.或者下载我下载好的插件：链接：https://pan.baidu.com/s/1iXb20TiQgYpEBd_dLumHpw
提取码：cq9m

macyjs官网首页
在这里插入图片描述
进入github后下载插件
在这里插入图片描述
将下载到的插件解压在这里插入图片描述

放到要引用放的目录下
在这里插入图片描述

下载到的插件包有这些文件
在这里插入图片描述
在html文件中引入插件

    <link rel="stylesheet" href="./macy.js-master/demo/assets/css/macy.css">


<script src="./macy.js-master/dist/macy.js"></script>

再在html中设置一个javascript环境域配置页面具体的响应式布局，分别为页面1200px宽度时分5栏，左右边距23px，上下边距4px,屏幕940px宽度时分5栏，上下边距23px,屏幕520px宽度时分3栏，左右上下边距3px,屏幕400px宽度时分2栏，

<script>
    window.onload=function(){
       var masonry = new Macy({
        container: '#macy-container', // 图像列表容器id
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        //设计间距
        margin: {
            x: 10,
            y: 10
        },
        //设置列数
        columns: 4,
        //定义不同分辨率（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>

总的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./macy.js-master/demo/assets/css/macy.css">
</head>
<body>
    <div id="macy-container">
        <div>
            <img src="./img/iu.png" alt="">
            
        </div>
        <div>
            <img src="./img/iu2.png" alt="">
        </div>
        <div>
            <img src="./img/iu3.png" alt="">
        </div>
        <div>
            <img src="./img/iu4.png" alt="">
        </div>
        <div>
            <img src="./img/iu3.png" alt="">
        </div>
        <div>
            <img src="./img/iu2.png" alt="">
        </div>
        <div>
            <img src="./img/iu.png" alt="">
        </div> 
        
        
    </div>
</body>
<script src="./macy.js-master/dist/macy.js"></script>
<script>
    window.onload=function(){
       var masonry = new Macy({
        container: '#macy-container', // 图像列表容器id
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        //设计间距
        margin: {
            x: 10,
            y: 10
        },
        //设置列数
        columns: 4,
        //定义不同分辨率（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>

</html>

实现结果
在这里插入图片描述

总结

小兔崽啊啊啊
关注
Macy.js：轻量级瀑布流布局神器
gitblog_01052的博客
09-13 877
Macy.js：轻量级瀑布流布局神器 macy.js 项目地址: https://gitcode.com/gh_mirrors/ma/macy.js 项目介绍 Macy.j...
前端必备插件之纯原生JS的瀑布流插件Macy.js
10-18
主要介绍了前端必备插件之纯原生JS的瀑布流插件Macy.js，一款非常轻量级的纯原生JS的瀑布流插件，有兴趣的可以了解一下
制作js原生瀑布流插件
墨羽晨的博客
10-03 685
先看效果 和普通的瀑布流是一样的，在调用时制需要传入容器，图片以及图片宽度即可直接生成瀑布流 话不多说，看代码，后面说一下思路 1.html以及调用，其中HTML只需要一行 <body> <div class="main"></div> <script src="index.js"></script> <script> // 第一个参数，瀑布流容器 var dom.
图片瀑布流筛选插件stable.js
ICode联盟
11-09 134
stableJs是一款带排序功能的js masonry瀑布流插件。stableJs能够使元素以卡片形式显示，并以masonry瀑布流方式进行布局，通过点击分类按钮，可以将卡片按指定的方式动态排序。 dd:
JS瀑布流插件 -- salvattore
cuipy的博客
01-24 1658
说两句 今天是腊八，腊月初八。老辈子腊八这天会把家里的粮食柜子翻出来，把各种谷物豆类都凑到一起熬粥，其实也不一定是8种，总是自己喜欢什么口味就放什么东西，样数不厌其繁，多多益善，在文火上直熬3个小时才喝，非常的好喝。 以前这一天是生意人一年封账的时候，把账目算清楚，债主会通知欠债人还钱。做生意欠账不丢人，账期是由来已久的，中国三角债问题是文化，并不是坏事，其实在以前是基于人文信用体
响应式流布局macy.js
09-30
Macy.js 是一个轻量级、高效的JavaScript插件，专门用于实现这种响应式流布局。 Macy.js 的核心特性在于它的灵活性和易用性。它不需要依赖任何其他库，如jQuery，这使得它在项目中易于集成，同时也降低了页面加载...
H5，小程序中实现小红书式排序 瀑布流(横向排序) macy插件实际使用
Cvory
05-18 2257
需求： 瀑布流排序非等长的块级 一排两个样式图如下： （先直接讲解决方案，后续放原生3种方式的缺点，有兴趣往后看） 解决方案： 使用 Macy.js 插件 官网：http://macyjs.com/ 优点： 体积小，仅4KB 无需依赖jQuery 可配置化强，一句话可解决瀑布流显示 Code： JS使用 // react Hook中的使用 useEffect(() => { // 瀑布流设置 var masonry = new Macy({ contain
纯原生js无限瀑布流
09-01
纯原生JavaScript实现无限瀑布流是一个涉及到前端布局、事件处理、数据获取和性能优化等多个方面的问题。通过理解以上知识点并结合实际项目需求，我们可以构建出一个高效、流畅的瀑布流页面。在实践中，可以参考现有...
JS插件实现瀑布流布局的PHP版本
最新发布
.
10-05 75
接下来，我们遍历容器元素中的子元素，并将每个子元素按照瀑布流布局的规则进行定位。具体来说，我们通过比较每一列的高度，找到高度最小的列，并将当前子元素定位在该列的底部。然后更新该列的高度，将其加上当前子元素的高度。瀑布流布局是一种常见的网页布局方式，它可以让页面上的元素以类似瀑布流的方式展示，给用户带来更好的浏览体验。现在，当页面加载完成时，瀑布流布局插件将被调用，子元素将按瀑布流的方式进行定位并展示在页面上。最后，我们找到最高的列的高度，将容器元素的高度设置为该值，以确保容器元素能够容纳所有子元素。
masonry.pkgd.min.js 自适应瀑布流插件
03-17
前端自适应瀑布流插件
js实现瀑布流效果
12-22
js实现瀑布流效果，下拉继续加载数据，移动端自适应屏幕
web前端入门到实战：原生JS实现一个瀑布流插件
web前端开发教程htmlcssjs
12-15 187
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 基础功能实现 首先我们定义好一个有 20 张图片的容器， <body> <style> #waterfall { position: relative; } ...
jQuery插件实现瀑布流
qq_46112274的博客
01-11 497
jQuery插件 1、瀑布流插件的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS 瀑布流
梦想家博客
03-30 231
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { ma
JS瀑布流
qq_38851897的博客
12-23 422
这个页面主要通过前端技术中非常流行的瀑布流技术来展示图片，瀑布流技术的原理主要分为两部分： 1.瀑布流的排版 一，先将每张图片的宽度写死固定为某个值，这时每张图片的高度也随之等比例缩小，保证每张图片的宽度都一样。 二，根据浏览器的可视界面的宽度除以每张图片的宽度得出浏览器一行最多能够放几张图片Num，即Num = Math.floor（clientWidth / imgwidth） 三，这...
JS实现瀑布流
qq_36582776的博客
03-14 890
function waterFall(){ var addimg={'data':[{'src':'0.jpg'},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"}]}; var heightArr=[]; screenWidth=window.innerWidth.
js 实现瀑布流
qq_44419617的博客
12-20 243
瀑布流又称瀑布流式布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
瀑布流布局react
08-24
瀑布流布局也适用于React，你可以使用Macy.js这个轻量级的纯原生JS瀑布流插件来实现。这个插件非常适合图片和视频网站，并且适应复杂的布局。你可以在引用中找到更多关于Macy.js的信息，以及在引用中找到相关代码的示例。在React中，你可以将Macy.js作为一个第三方插件引入，并按照你的需求进行相应的配置和使用。对于CSS布局方面，你可以参考引用中的代码，将图片的宽度设置为父盒子的100%以适应瀑布流布局。希望这些信息对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [react中使用macy插件实现瀑布流布局](https://blog.csdn.net/weixin_46041654/article/details/111906421)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [瀑布流布局 WaterfallLayout](https://download.csdn.net/download/qq_18983205/9849283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值