js网页瀑布流布局
瀑布流布局思路:
1、css样式,图片的父级div样式设置为定位或者浮动
2、找出图片父级元素(box)和最外元素(main);获取box的宽度和main的宽,然后计算main容器一行能容纳多少个box(即有多少列)
3、声明一个空数组(用于放置每列的高度)
4、for(var i=0;i<box.length;i++)循环遍历所有的box元素,if 判断i是否小于上面求得的列数,设置box元素top、left和把box元素的高度添加进空数组;如果i值大于列数就是第二行其余的box元素,查找出数组中的最小值和最小值的索引,设置box的top为这个值,left值为box[index].offsetLeft,更新所查找到的数组元素的值(原数组值+当前box的高度)
5、定位和浮动脱离了文档流,最高给main设置高度为数组的最大值
css样式
<style type="text/css">
* {
margin:;
padding:;
}
body{
overflow-x:hidden ;
}
#main {
position: relative;
margin: 0 auto;
} #main .box {
position: absolute;
/*transition: all 1s;*/
} #main .box .pic {
width: 165px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
} #main .box .pic img {
width: 100%
}
</style>
HTML代码
<div id="main">
<div class="box">
<div class="pic">
<img src="img/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg" />
</div>
</div>
</div>
js代码
<script type="text/javascript">
window.onload = function() {
waterFall("main", "box");
window.onresize = function() {
waterFall("main", "box");
} function waterFall(parent, box) {
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent, box);
var oBoxW = oBoxs[0].offsetWidth + 15;
var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
if(cols<4){
cols=4;
} var hArr = [];
for(var i = 0; i < oBoxs.length; i++) {
if(i < cols) {
oBoxs[i].style.top = 0;
oBoxs[i].style.left = i * oBoxW + "px";
hArr.push(oBoxs[i].offsetHeight);
} else {
var minH = Math.min.apply(null, hArr);
var index = getIndexOf(hArr, minH);
var top = minH + 15; //加15用于图片上下的间距
oBoxs[i].style.top = top + "px";
oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
hArr[index] += oBoxs[i].offsetHeight + 15;
}
}
//设置父级main的宽度、高度
var maxH = Math.max.apply(null, hArr);
oParent.style.cssText = 'height:' + maxH + 'px;width:' + (oBoxW * cols - 15) + 'px;margin:0 auto';
} function getByClass(oParent, clsName) {
var boxArr = new Array();
var oElements = oParent.getElementsByTagName('*');
var oElementsLen = oElements.length;
for(var i = 0; i < oElementsLen; i++) {
if(oElements[i].className == clsName) {
boxArr.push(oElements[i])
}
}
return boxArr;
} function getIndexOf(arr, val) {
for(var i in arr) {
if(arr[i] == val) {
return i;
}
}
}
}
</script>
js网页瀑布流布局的更多相关文章
- js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...
- 原生JS实现瀑布流布局
瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 1.首先瀑布流所有的图片应该保持宽度一致,高 ...
- js实现瀑布流布局
window.onload = function () { var d1 = new Waterfall(); d1.init();};//构造函数function Waterfall() { thi ...
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
随机推荐
- Luogu 3761 [TJOI2017]城市
BZOJ 4890. 在树上断开一条边之后会形成两个联通块,如果要使这一条边接回去之后保持一棵树的形态,那么必须在两个联通块之间各找一个点连接. 那么,对于每一条可能断开的边,它产生的答案是以下两者的 ...
- Java50道经典习题-程序49 子串出现的个数
题目:计算首末不含空格各个子串之间只含一个空格的字符串中子串出现的次数分析:例如输入的字符串为"I come from County DingYuan Province AnHui.&quo ...
- 无废话MVC入门教程笔记
自学mvc,看了园子里李林峰写的李林峰写的无废话MVC入门教程笔记,现在有的平时忽略的或是不太清楚的点记下来 1,Html.DropDownList //服务端写法 @{ //下拉列表的值 List& ...
- c# sql省市联动
C# sql省市联动 USE [Book] GO ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ...
- Gazebo学习随记2 SDF和XML
Model 模型 一个模型数据库会拥有的文件 database.config:有关数据库的元数据,从CMakeList自动填充『本地不需要』 model文件夹 一个模型[奏是辣个文件夹]会有的文件 m ...
- Serialization之BinaryFormatter
前言 BinaryFormatter序列化二进制序列化使用二进制编码来生成精简的序列化,以用于存储或基于套接字的网络流等. 内容 下面通过一个小小的例子来给大家说明什么是BinaryFormatter ...
- 【51Nod 1363】最小公倍数之和(欧拉函数)
题面 传送门 题解 拿到式子的第一步就是推倒 \[ \begin{align} \sum_{i=1}^nlcm(n,i) &=\sum_{i=1}^n\frac{in}{\gcd(i,n)}\ ...
- loj #6485. LJJ 学二项式定理 (模板qwq)
$ \color{#0066ff}{ 题目描述 }$ LJJ 学完了二项式定理,发现这太简单了,于是他将二项式定理等号右边的式子修改了一下,代入了一定的值,并算出了答案. 但人口算毕竟会失误,他请来了 ...
- P3345 [ZJOI2015]幻想乡战略游戏 动态点分治
\(\color{#0066ff}{ 题目描述 }\) 傲娇少女幽香正在玩一个非常有趣的战略类游戏,本来这个游戏的地图其实还不算太大,幽香还能管得过来,但是不知道为什么现在的网游厂商把游戏的地图越做越 ...
- P2700 逐个击破
题意:现在有N个城市,其中K个被敌方军团占领了,N个城市间有N-1条公路相连,破坏其中某条公路的代价是已知的, 现在,告诉你K个敌方军团所在的城市,以及所有公路破坏的代价,请你算出花费最少的代价将这K ...