JS原生方法实现瀑布流布局

html部分（图片都是本地，自己需要改动图片）

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66; min-height: 35.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

css部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #929151 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 }
span.s1 { color: #929151 }
span.s2 { color: #4f5d66 }
span.s3 { color: #48565d }
span.s4 { color: #ad42ef }
span.s5 { color: #d16400 }
span.s6 { color: #698906 }
span.s7 { color: #2b7ec3 }
span.Apple-tab-span { white-space: pre }

margin: 0;

padding: 0;

}

#main{

position: relative;

}

.box{

padding: 15px 0 0 15px;

float: left;

}

.pic{

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

}

.pic img{

width: 300px;

height: auto;

}

js部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4663cc }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #e48b00 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; min-height: 35.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #698906 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #b58a00 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas }
span.s1 { color: #4a8a01 }
span.s2 { color: #4f5d66 }
span.s3 { color: #e48b00 }
span.s4 { color: #698906 }
span.s5 { color: #000000 }
span.s6 { color: #289c97 }
span.s7 { color: #4663cc }
span.s8 { color: #ad42ef }
span.s9 { color: #b58a00 }
span.s10 { color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

window.onload = function() {

waterfall('main', 'box');

var dataInt={"data":[{"src":'003.jpg'},

{"src":'022.jpg'}

,{"src":'025.jpg'},

{"src":'006.jpg'},

{"src":'007.jpg'},

{"src":'019.jpg'},

{"src":'020.jpg'},

{"src":'010.jpg'}]}

window.onscroll=function(){

if (checkScrollSlide) {

var oParent=document.getElementById("main");

//将数据块渲染到当页面的尾部

for (var i=0;i<dataInt.data.length;i++) {

var oBox=document.createElement('div');

oBox.className='box';

oParent.appendChild(oBox);

var oPic=document.createElement('div');

oPic.className='pic';

oBox.appendChild(oPic);

var oImg=document.createElement('img');

oImg.src="img/"+dataInt.data[i].src;

oPic.appendChild(oImg);

}

waterfall('main', 'box');

}

function waterfall(parent, box) {

//将main下的所有的class为box的元素取出来

var oParent = document.getElementById(parent);

var oBoxs = getByClass(oParent, box);

// console.log(oBoxs.length);

//计算整个页面显示的列数（页面宽/box的宽）

var oBoxw = oBoxs[0].offsetWidth; //获得每一列的宽度

// console.log(oBoxw);

//获取页面的宽度除以每一列的宽度

var cols = Math.floor(document.documentElement.clientWidth / oBoxw);

//console.log(cols);

//设置main的宽

oParent.style.cssText = 'width:' + oBoxw * cols + 'px;margin:0 auto';

//声明一个数组，存放每一列的高度

var hArr = [];

//遍历所有的oBoxs

for(var i = 0; i < oBoxs.length; i++) {

if(i < cols) {

hArr.push(oBoxs[i].offsetHeight);

} else {

//求第一列box的最小的高

//借助apply方法改变函数中this的指向，就是可以对数组取最小值

var minH = Math.min.apply(null, hArr);

var index=getMinhIndex(hArr,minH);//索引数组中高最小的那个

oBoxs[i].style.position='absolute';

oBoxs[i].style.top=minH+'px';

//oBoxs[i].style.left=oBoxw*index+'px';

oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';

hArr[index]+=oBoxs[i].offsetHeight;

}

console.log(hArr);

}

//根据class获取元素

function getByClass(parent, clsName) {

var boxArr = new Array(); //用来存储获取到的所有的class为box的元素

oElements = parent.getElementsByTagName('*'); //获得main下面的所有的元素,形成一个数组

//遍历数组oElements

for(var i = 0; i < oElements.length; i++) {

if(oElements[i].className == clsName) {

boxArr.push(oElements[i]);

}

return boxArr;

}

//getMinhIndex(hArr,minH);

//找到数组中最小数值的arr[i]

function getMinhIndex(arr,val){

for(var i in arr){

if (arr[i]==val) {//数组hArr[i]中的minH是最小值，此时的i就是我们想要的

return i;

}

//检测是否具备了滚动条加载数据块的条件

function checkScrollSlide(){

var oParent=document.getElementById('main');

var oBoxs=getByClass(oParent,'box');

var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+

Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);

var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

// console.log(scrollTop);

var height=document.body.clientHeight||document.documentElement.clientHeight;

// console.log(height);

return (lastBoxH<scrollTop+height)?true:false;

}

JS原生方法实现瀑布流布局的更多相关文章

js 原生方法获取所有兄弟节点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
JS案例之7——瀑布流布局(2)
这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...
像jq那样获取对象的js原生方法
使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...
JS原生方法被覆盖后的恢复办法
alert 被覆盖今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...
js原生方法传参的细节（面试必问）
废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...
JS原生方法实现jQuery的ready()
浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...
图片首尾平滑轮播(JS原生方法—节流)<原创>
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...
【笔记】js原生方法在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）
介绍的这个方法是:insetAdjacentHTML() 方法此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元 ...

随机推荐

CSS3 初步学习
CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的. 一.CSS3边框 1.圆角border-radius border-radius:值越大,角越圆 ...
java学习第三天
关于上次的数据转换,如果定义的是 short 是,那么s=s+1,这样是错误的,会损失精度,但如果是s+=1.确实正确的,因为它包含了一个强制转化在里面.相当于 s=(int)(s+1); 然后特地 ...
OAuth2集成
目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAuth协议的下一个版本,相比OAut ...
转：RealThinClient (RTC)是什么?
RealThinClient SDK是用于开发标准的HTTP(S)服务器,ISAPI扩展以及客户端的VCL控件.可用于Windows下的CodeGear Delphi 6-XE5. 功能描述 Abou ...
交换两个数-c++实现
今天看了下交换数值的小程序,网上挺多的,整理了下,,因为参考较多,没一一给出链接,若原作者看到,可以留言,我会添加 // example_1_6_function_swap.cpp : 定义控制台应用 ...
Intellij IDEA 导入Eclipse或MyEclipse的Web项目
1.通过TortoiseSVN客户端将远程项目checkout出来,保存到硬盘上 2.File -> Import Module -> 选择之前检出的项目 3.进入"Import ...
cocos2d-js版本A*算法
[转]http://blog.csdn.net/realcrazysun1/article/details/43054229 A*算法的东西网上讲了很多~但还是不可避免的要去研究一下,cocos官网上 ...
JavaWeb项目连接Oracle数据库
参考网址:http://jingyan.baidu.com/article/0320e2c1d4dd0b1b87507b38.html 既然你要链接oracle数据库 ,那么首先就是先打开我们的ora ...
Python学习笔记（二）基本语法
Class 2 一.交互式编程交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,如下图: ...
Binder的设计和框架
转自:http://wangkuiwu.github.io/2014/09/01/Binder-Introduce/ 1. Binder架构解析 1.1 Binder模型上图中涉及到Binder模型 ...

JS原生方法实现瀑布流布局

JS原生方法实现瀑布流布局的更多相关文章

随机推荐

热门专题