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),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
随机推荐
- spring aop 动态代理批量调用方法实例
今天项目经理发下任务,需要测试 20 个接口,看看推送和接收数据是否正常.因为对接传输的数据是 xml 格式的字符串,所以我拿现成的数据,先生成推送过去的数据并存储到文本,以便验证数据是否正确,这时候 ...
- Heritrix1.14.4在Eclipse的配置和使用
转载 1.首先在 Eclipse 中新建 Java 工程 ,工程名自取,以MyHeritrix为例.利用下载的源代码包根据以下步骤来配置这个工程. 2.导入类库 Heritrix 所用到的工具类库都在 ...
- 【本地资源路径&&网络资源路径&&正反斜杠在Java中的用法】
一.概念和用法 左正右反 先来看看转义字符的概念:通过 \ ,?来转变后面字母或符号的含义.意思就是改变字母本身的含义. 以"\"符号为例,JAVA中有很多操作,例如文件操作等,需 ...
- applicaitonContext属性未注入, 请在applicationContext.xml中定义SpringContextHolder.
我用的jeesite框架,在使用定时任务时,出现一些问题,,1.在windows上项目可以在tomcat下,运行2.在linux下项目在tomcatgh下,却出现问题: 15-Dec-2017 15: ...
- Nginx限速模块初探
Nginx限速模块分为哪几种?按请求速率限速的burst和nodelay参数是什么意思?漏桶算法和令牌桶算法究竟有什么不同?本文将带你一探究竟.我们会通过一些简单的示例展示Nginx限速模块是如何工作 ...
- NodeJs学习笔记（三）
最近在用sails框架写移动后台,马上就过年了,打算总结一下. 1.资源 node官方网站: www.nodejs.org sails官方网站:www.sailsjs.org ...
- 队列queue(1) 结构体实现队列
前言 首先,我们先来做一道解密题:一串数列 7 6 8 6 6 7 0 4 1 ,规定一个回收站,把第一个数删除,添加到回收站里,然后把第二个数排到队伍最末尾,把第三个删除,添加到回 ...
- iOS Swift基础知识代码
推荐:Swift学习使用知识代码软件 //集合类型 数组 字典 func array1(){ var arr = [","dd"] //简单写法 var arr1 = [ ...
- Oracle初级——续续篇
逝者如斯夫,不舍昼夜 所有的SQL都经过测试,可粘贴,可复制,有问题请各位大神指出...... --约束 与表一起使用 约束不合理的数据,使其不能进入表中? ','李小龙','一班','该学生成天练武 ...
- Linux 学习记录 一(安装、基本文件操作).
Linux distributions主要分为两大系统,一种是RPM方式安装软件的系统,包括Red Hat,Fedora,SuSE等都是这类:一种则是使用Debian的dpkg方式安装软件的 ...