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),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
随机推荐
- <算法>进制转换超详细
16转10 用竖式计算: 16进制数的第0位的权值为16的0次方,第1位的权值为16的1次方,第2位的权值为16的2次方 第0位: 5 * 16^0 = 5 第1位: F * 16^1 = 240 第 ...
- C语言递归实现二叉树（二叉链表）的三种遍历和销毁操作（实验）
今天写的是二叉树操作的实验,这个实验有三个部分: ①建立二叉树,采用二叉链表结构 ②先序.中序.后续遍历二叉树,输出节点值 ③销毁二叉树 二叉树的节点结构定义 typedef struct BiTNo ...
- Mysql的管理及使用
第1章 Mysql的管理 1.1 连接管理mysql mysql[options] #Linux或UNIX shell提示符(终端窗口) mysql --help #查看帮助信息 mysql --ve ...
- 用shell制作IP脚本
vim ip.sh #!/bin/bashread -p "eth:" eread -p "ip:" ip1read -p "netmask:&qu ...
- 两行 CSS 代码实现 PNG 任意颜色赋色技术
很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现. 本方法与上面 ZXX 的方法及流传的使用 f ...
- 移动端 cursor:pointer问题
之前一直没有注意过,为元素设置上cursor:pointer属性后,会导致元素点击时出现一个蓝色的背景. 为元素设置-webkit-tap-highlight-color: transparent;可 ...
- 通过c# 实现mysql 数据库的备份和附加
近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...
- Linux基础：文件查找find
写在前面 在linux的日常管理中,find的使用频率很高,熟练掌握对提高工作效率很有帮助. find的语法比较简单,常用参数的就那么几个,比如-name.-type.-ctime等.初学的同学直接看 ...
- 对jbox2d引擎的一些回顾与思考(swing实现demo)
JBox2d回顾与思考 jbox2d 是 box2d 的java移植,感觉国内网络上针对jbox2d的教程还比较少(通常是box2d).回顾一下这几天的学习历程顺便写下博主的所思所想. swing实现 ...
- Elasticsearch过滤器——filter
Elasticsearch中的所有的查询都会触发相关度得分的计算.对于那些我们不需要相关度得分的场景下,Elasticsearch以过滤器的形式提供了另一种查询功能.过滤器在概念上类似于查询,但是它们 ...