您的位置：首页 > Web前端 > JavaScript

Javascript学习笔记--瀑布流

2015-08-19 23:56 766 查看
js代码：

/**
* Created by Sindy on 2015/8/19.
*/
window.onload=function(){
imagelocation("container", "box");
// 创建JSON结构，模拟加载的图像
var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
//当滚动条滚动到页面底部时自动加载图像
window.onscroll = function(){
//checkFlag();
//创建节点
if(checkFlag()){
var cparent = document.getElementById("container");
for(var i=0;i<imgData.data.length; i++){
var ccontent = document.createElement("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg=document.createElement("div");
boximg.className="box_img";
ccontent.appendChild(boximg);
var img = document.createElement("img");
img.src = "img/"+imgData.data[i].src;
boximg.appendChild(img);
}
imagelocation("container", "box");
}
}
}

// 计算滚动条底部，当滚动条触底时加载图像
function checkFlag(){
var cparent = document.getElementById("container");
var ccontent = getChildElement(cparent, "box");
var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
//console.log(lastContentHeight);
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//console.log(scrollTop);
var pageHeight = document.documentElement.clientHeight||document.body.scrollHeight;
//console.log(lastContentHeight+";"+scrollTop+";" +pageHeight);
if(lastContentHeight < scrollTop+pageHeight){
return true;
}
}

// 瀑布流核心：计算图像的高度，向指定位置加载图像；
function imagelocation(parent, content){
//将父级空间的内容全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent, content);
//console.log(ccontent);
var imgWidth = ccontent[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/imgWidth);
cparent.style.cssText = "width:" + imgWidth*cols+"px;margin:0 auto";

var BoxHeightArr = [];
// 计算图片插入位置：找到高度最小的图片插入，然后将插入图片后的高度加入该位置，继续循环；
for(var i=0; i<ccontent.length;i++){
if(i<cols){
BoxHeightArr[i] = ccontent[i].offsetHeight;
//console.log(BoxHeightArr[i]);
}else{
var minHeight = Math.min.apply(null, BoxHeightArr);
//console.log(minHeight);
var minIndex = getminheightlocation(BoxHeightArr, minHeight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minHeight + "px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
}
}
}

//得到高度最小的图片所在的位置
function getminheightlocation(BoxHeightArr, minHeight){
for(var i in BoxHeightArr){
if(BoxHeightArr[i] == minHeight){
return i;
}
}
}

function getChildElement(parent, content){
var contentArr = [];
var allcontent = parent.getElementsByTagName("*");
for(var i=0; i<allcontent.length; i++){
if(allcontent[i].className == content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
css代码：

*{
margin: 0px;
padding: 0px;
}

#container{
position: relative;
}

.box{
padding: 5px;
float:left;
}

.box_img{
padding: 5px;
border: 1px solid #CCCCCC;
box-shadow: 0 0 5px #CCC;
border-radius: 5px;
}

.box_img img{
width: 150px;
height: auto;
}


html:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/app.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/7.jpg">
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航