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>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/one.css"/>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<!--瀑布流的特点是等宽不等高-->
<!--怎么滑都没有尽头-->
<div id="main">
<div class="box">
<div class="pic">
<img src="img/003.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/005.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/006.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/007.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/009.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/010.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/011.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/012.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/013.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/014.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/016.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/018.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/019.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/020.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/021.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/022.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/023.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/024.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/025.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/index.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/index001.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/u=1265768299,3970469844&fm=21&gp=0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/022.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/023.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/024.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/009.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/010.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/011.jpg"/>
</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:在调用元 ...
随机推荐
- vmware workstation LINUX磁盘扩容
1.edit virtual machine settings -> 选中硬盘->右侧utilities->expand(虚拟机不能存在镜像),输入要扩容到的大小 2.扩容之后进入系 ...
- Sonar升级遇到的那些事儿
目录 背景 如何升级 如何回滚 问题解决 参考 背景 目前我们用SonarQube版本是4.0,这次准备升级到最新版本5.1, 以便支持以后的JavaScript的项目. 如何升级 我们可以直接跨越版 ...
- javaSwing文本框组件
public class JTextFieldTest extends JFrame{ private static final long serialVersionUID = 1L; p ...
- Mysql备份迁移——Mysqldump(.NET调用Mysqldump.exe方式)——(解决视图嵌视图报错)
利用Mysqldump备份和迁移,我想很多人都用过,具体参数不介绍了,这里主要讲.NET调用Mysqldump进行备份和.NET调用Mysql.exe进行导入数据. 这里使用的是5.1版的Mysqld ...
- js实现一套代码来控制所有的运动,图片的淡入淡出,winth,height的变宽
介绍了那么多运动,這次一套代码实现所有运动 1.html代码和css代码,只是定义一个div <style> div{ width:200px; height:200px; margin: ...
- 关于xib文件和storyboard文件的那些事儿
在ios中,一般建议使用代码布局,因为使用代码布局,后期维护容易,拓展容易,并且可以实现动态加载很多数据,但是代码布局比较繁琐,不适合初学者.Xib布局或者Storyboard布局比较方便.下面介绍一 ...
- SQL笔记-第四章,数据的检索
一.select的简单用法 1.简单的数据检索 SELECT * FROM T_Employee; 2.检索出需要的列 SELECT FNumber,FName,FAge FROM T_Employe ...
- weed-fs 基础测试
=================== 启动 master 端口:9333 =================== sunsl@test-server:~$ weed master I0102 15: ...
- centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复
centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复 有时候我们会碰到这样的业务场景: 1.将大的数据库恢复到本地进行业务测试 ...
- python 排序
python 写的排序,实现起来还是比较简单 #快速排序 def qsort(L): if len(L)>1: return qsort([i for i in L[1:] if i<L[ ...