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

Javascript实现瀑布流

2015-08-18 16:34 585 查看

瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是
pinterest、美丽说、蘑菇街这类型的网站。

HTML5代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS瀑布流</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/app.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/11.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/12.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/13.jpg">
</div>
</div>
</div>
</body>
</html>

CSS3代码：

*{
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 #cccccc;
border-radius: 5px;
}

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

JavaScript代码：

/**
* Created by ASUS on 2015/8/17.
*/
window.onload = function(){
imgLocation("container","box");
var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"}]};
window.onscroll = function(){
if(checkFlag()){
var cparent = document.getElementById("container");  //获取根视图对象
for(var i = 0;i<imgData.data.length;i++){
var ccontent = document.createElement("div");  //动态创建“div”元素
ccontent.className = "box";    //指定className为“box”
cparent.appendChild(ccontent);
var boximg = document.createElement("div");
boximg.className = "box_img";
ccontent.appendChild(boximg);
var img = document.createElement("img");
img.src = "images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}

function checkFlag(){           //判断滚动条是否滑动至底端
var cparent = document.getElementById("container");
var ccontent = getChildElement(cparent,"box");
var lastContentHeight = ccontent[ccontent.length-1].offsetTop; //得到最后一张图片距顶部高度
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //兼容性考虑（获取当前页面的滚动条纵坐标位置）
var pageHeight = document.documentElement.clientHeight||document.body.clientHeight; //得到当前页面的高度
if(lastContentHeight<scrollTop+pageHeight){
return true;
}
}

function imgLocation(parent,content){
//将parent下都有的content全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(cparent,content);
var imgWidth = ccontent[0].offsetWidth;    //得到图片的宽度
var num = Math.floor(document.documentElement.clientWidth/imgWidth);   //得到每行的图片个数
cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";   //固定父级标签（"container"）宽度以及整体居中

var BoxHeightArr=[];
for(var i=0;i<ccontent.length;i++) {
if (i < num) {
BoxHeightArr[i] = ccontent[i].offsetHeight;  //得到每张图片的高度
}else{
var minheight = Math.min.apply(null,BoxHeightArr);  //得到数组中的图片的最小高度
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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航