你的位置:首页 > Java教程

[Java教程]JS原生方法实现瀑布流布局


html部分(图片都是本地,自己需要改动图片)

<!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部分

*{

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部分

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;

}