1200字范文 > 流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流

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

时间：2022-11-21 00:51:25

文章目录

瀑布流的定义一、实现效果代码首先是用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.该插件地址（点击链接跳转首页）：/

2.github仓库地址（点击链接跳转下载页面）：/bigbitecreative/macy.js

3.或者下载我下载好的插件：链接：/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', // 图像列表容器idtrueOrder: 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', // 图像列表容器idtrueOrder: 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>

实现结果

总结

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。