瀑布流的定义

瀑布流是什么?
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', // 图像列表容器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>

实现结果

总结

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

如何在小程序内使用流式布局实现动态相册效果？
通过使用流式布局及数据表的查询事件实现按照特定分类查询相册内容效果展示具体步骤 1. 制作相册列表 2. 制作相册数据表 3. 添加查询相册数据事件 4. 制作相册详情页 5. 获取相册列表数据 ...
【转】关于WaterFall瀑布流式布局的性能优化
市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ ...
html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
什么是瀑布流布局？瀑布流式布局的优缺点
瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式. 视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部. 是一种多列等宽不等高的一种页面布局方 ...
前端开发_HTML5_布局-流式布局
流式布局 1.引入上一次课中我们讲解了表格布局,但是我们也可以看出表格布局存在着很大的局限性,那就是当页面的内容比较多的时候我们发现是无法使用表格布局实现的,那么接下来我们学习一个比较重要的布局方式 ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
Bootstrap 流式布局
同理,将Bootstrap的流式栅格放到 class="container-ﬂuid" 的流式容器中,即可创建流式布局.流式布局将填满整个视口宽度.如: <div class ...
自定义控件 - 流式布局（CofferFlowLayout）
自定义控件 - 流式布局(CofferFlowLayout) 先看效果图: 简介为了方便大家理解自定义View里的一些细节点,我这里把开发者模式里的"显示布局边界"打开了.这个D ...

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

文章目录

瀑布流的定义

一、实现效果

代码

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

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

总结

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

最新文章

热门文章