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

最新推荐文章于 2024-07-30 10:56:44 发布

小兔崽啊啊啊

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.8k

点赞数 2

文章标签： javascript css js html

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119428532

版权

文章目录

瀑布流的定义
一、实现效果
代码
- 首先是用javascript自己手写代码实现照片瀑布流
- 使用插件Mary.js照片流插件实现照片瀑布流
总结

瀑布流的定义

瀑布流是什么?
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>

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

总结

小兔崽啊啊啊

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录瀑布流的定义一、实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么?1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。2、唯美：图片的风格以唯美的图片为主。3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前有一个软件叫瀑布流。4.瀑布流又称瀑布流式布局，是比较流行的一种网站页
复制链接

扫一扫