javascript瀑布流
哇，瀑布流，是的，不错，不错，真的不错，很好玩的样子，于是自己想玩玩啊，来吧，就玩起。
循序渐进，我这里采用原生的js代码来书写。为了方便大家运行代码，我就全部样式和CSS都写在html里面了，当然还需要图片，我会打包。
来上代码。
直接代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>哇，瀑布流啊</title>
<style type="text/css"> @media screen and (min-width:1550px){
.waterfall-container {
width:1400px;
}
} @media screen and (max-width:1549px) and (min-width:1366px){
.waterfall-container {
width:1200px;
}
}
@media screen and (max-width:1365px) and (min-width:700px) {
.waterfall-container {
width:500px;
}
} @media screen and (max-width:699px) {
.waterfall-container {
width:350px;
}
} .waterfall-container{
top: 0;
float:left;
display:inline;
position:relative;
} .water-molecule {
position:absolute;
border: solid 1px #ccc;
padding: 10px;
width: 200px;
top: 0px;
left: 0px;
-webkit-transition: all .7s ease-out .1s;
-moz-transition: all .7s ease-out .1s;
-o-transition: all .7s ease-out .1s;
transition: all .7s ease-out .1s
}
img { width: 100%; } </style>
</head>
<body >
<div>
哟，好拽的瀑布流！！！
</div>
<div style="position:relative">
<div style="left:0; float:left; display:inline; width:100px"> <ul id="mediaSet">
<li><a href="#">1300px</a></li>
<li><a href="#">1100px</a></li>
<li><a href="#">900px</a></li>
<li><a href="#">600px</a></li>
</ul> </div>
<div class="waterfall-container">
<div class="water-molecule"><a href="images/temp_img02.jpg"><img src="data:images/temp_img02.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img03.jpg"><img src="data:images/temp_img03.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img04.jpg"><img src="data:images/temp_img04.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img09.jpg"><img src="data:images/temp_img09.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img05.jpg"><img src="data:images/temp_img05.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img06.jpg"><img src="data:images/temp_img06.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img07.jpg"><img src="data:images/temp_img07.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img08.jpg"><img src="data:images/temp_img08.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img09.jpg"><img src="data:images/temp_img09.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img10.jpg"><img src="data:images/temp_img10.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img11.jpg"><img src="data:images/temp_img11.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img12.jpg"><img src="data:images/temp_img12.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img13.jpg"><img src="data:images/temp_img13.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img14.jpg"><img src="data:images/temp_img14.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img15.jpg"><img src="data:images/temp_img15.jpg"/></a> </div>
<div class="water-molecule"><a href="images/temp_img15.jpg"><img src="data:images/temp_img15.jpg"/></a> </div> </div>
</div> <script type="text/javascript"> function minColunmnIndex (arr) {
var minColumn = 0;
var min = arr[minColumn];
for (var i = 1,len=arr.length; i < len; i++) {
var temp = arr[i];
if (temp < min) {
minColumn = i;
min = temp;
};
};
return minColumn;
} Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
} function waterWall(container,settings){ var _settings = {
margin:10,
cellClass:"water-molecule"
};
if(typeof settings != "undefined"){
_settings = Object.extend(_settings,settings);
}
var margin = _settings.margin;
var boxes = document.getElementsByClassName(_settings.cellClass);
var wContainer = container;
var boxWidth = boxes[0].offsetWidth + margin; function waterfall () {
var columnHeight=[];
var waterFallWith = container.offsetWidth;
var n = parseInt(waterFallWith/boxWidth);
var columnNum = n == 0 ? 1 : n;
var baseLeft = wContainer.offsetLeft;
for (var i = 0,l=boxes.length; i <l ; i++) {
if (i<columnNum) {
columnHeight[i]=boxes[i].offsetHeight+margin;
boxes[i].style.top = 0;
boxes[i].style.left = i*boxWidth+margin+'px';
} else{
var innsertColumn = minColunmnIndex(columnHeight),
imgHeight = boxes[i].offsetHeight+ margin;
boxes[i].style.top = columnHeight[innsertColumn]+'px';
boxes[i].style.left = innsertColumn*boxWidth+margin+'px';
columnHeight[innsertColumn] +=imgHeight;
}; };
}; var wf = {
master: container,
waterfall:waterfall
} return wf;
}
var wf = new waterWall(document.getElementsByClassName("waterfall-container").item(0));
window.onload = function(){wf.waterfall();};
window.onresize = function(){
wf.master.style.width = null;
wf.waterfall();
}; document.getElementById("mediaSet").addEventListener("click",function(ev){
var link = ev.target,
width = link.text;
wf.master.style.width = width;
wf.waterfall(); },false); </script>
</body>
</html>
分析：
1. 核心就是waterfall方法，计算当前容器的offsetWith，和定义好的单位元素的宽度以及定义的margin来计算列数，再通过当前索引
2. minColumnIndex来计算当前高度最小的列，然后取改列已经存有的高度作为top的值，用 index * 单位元素的宽度 + margin作为 left的值
3.头部定义媒体查询，做到初始化的时候，自动调整，当然，在resize的时候可以动态重新计算，我这里没有这么做
4. 设置了几个 1300,100， 900， 600几个值，用来点击测试。
源码下载：
http://files.cnblogs.com/files/mouse_in_beijing/PB.zip
javascript瀑布流的更多相关文章
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- JavaScript—瀑布流
现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面 因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成 js部分 思 ...
- JavaScript瀑布流代码
function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt( ...
- web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JavaScript：实现瀑布流
一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...
- 用JavaScript和jQuery实现瀑布流
▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...
- JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾
页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
随机推荐
- Python2/3中的urllib库
urllib库对照速查表 Python2.X Python3.X urllib urllib.request, urllib.error, urllib.parse urllib2 urllib.re ...
- python爬虫(二)_HTTP的请求和响应
HTTP和HTTPS HTTP(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收HTML页面的方法 HTTPS(HyperText Transfer Prot ...
- UGUI表情系统&超链接解决方案
最近帮一个同事解决图文混排的问题,发现了一种犀利的UGUI表情系统的解决方案 https://blog.uwa4d.com/archives/Sparkle_UGUI.html 使用重新生成UGUI文 ...
- JAVA入门[12]-JavaBean
一.什么是JavaBean JavaBean是特殊的Java类,使用Java语言书写,并且遵守规范: 提供一个默认的无参构造函数. 需要被序列化并且实现了Serializable接口. 可能有一系列可 ...
- spring boot项目如何测试，如何部署
有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...
- org.elasticsearch.transport.ReceiveTimeoutTransportException[cluster:monitor/nodes/liveness] request_id [31] timed out after [5000ms]
ES连接超时,异常信息 2017-09-07 10:42:45.042 [elasticsearch[Bantam][transport_client_worker][T#17]{New I/O wo ...
- .NET 对 XML 进行创建，增加，删除，修改操作整理
前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...
- iOS UICollectionView(转三)
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- UITextFiled的输入框改成一条下划线
在一些程序的界面中,它们的编辑框是一条线,而UITextFiled本身并没有这种style,所有需要我们自己设置.方法还是挺多的 第一种 , (1).我们可以声明一个类继承与UITextFiled ( ...
- 7 Series GTP IP核使用总结 IP核配置篇
FPGA内嵌收发器相当于以太网中的PHY芯片,但更灵活更高效,线速率也在随着FPGA芯片的发展升级.本文对7系列FPGA内部高速收发器GTP IP核的配置和使用做些简单的总结,以备后续回顾重用.本文是 ...