html流布局代码,瀑布流布局实现的代码

这篇文章给大家介绍的内容是关于瀑布流布局实现的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

index.html

waterfall layout

wf.css@CHARSET "UTF-8";

*{margin:0;padding:0}

#main{

position: relative;

margin: 10px auto 0 auto;

}

.box{

float:left;

padding: 0 0 15px 15px;

}

.pic{

border: 1px solid #ccc;

padding: 10px;

}

.box img{

width: 200px;

height: auto;

}wf.jswindow.onload = function(){

waterfall();

//要加载的数据，暂时写一个固定数据

var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]};

//一个判断拖动滚动条后是否加载新内容的方法

window.onscroll = function(){

if(checkScrollSlide()){

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

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

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

var newBox = document.createElement('p');

newBox.className = 'box';

parent.appendChild(newBox);

var newPic = document.createElement('p');

newPic.className = 'pic';

newBox.appendChild(newPic);

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

newImg.src = "./imgs/" + dataInt.data[i].src;

newPic.appendChild(newImg);

waterfall();

}

}

}

}

function waterfall(){

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

//写一个方法根据类名box，找到所有节点

var boxArr = getByClass(parent,'box');

//console.log(boxArr.length);//26，检验是否获取到

var bodyWidth = document.body.clientWidth;

//document.body.clientWidth 窗口实时显示时的body的宽度

var colWidth = boxArr[0].offsetWidth;//box p的宽度

var cols = Math.floor(bodyWidth / colWidth);

//给main p一个宽度，从而让显示内容不会随着浮动，改变布局

var mainWidth = colWidth * cols;

parent.style.cssText = 'width:' + mainWidth + 'px;';

var colsHeight = [];//放列高度的数组

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

var iBox = boxArr[i];

if(i < cols){

colsHeight.push(iBox.offsetHeight);

}else{

var rArr = searchMin(colsHeight);

var index = rArr[0];

var minH = rArr[1];

var left = parseInt(index * colWidth);

var top = minH;

iBox.style.position = "absolute";

iBox.style.left = left + 'px';

iBox.style.top = top + 'px';

colsHeight[index] += iBox.offsetHeight;

}

}

}

function getByClass(parent,clsName){

//用通配符获得prent下的所有标签节点

var allTags = document.getElementsByTagName("*");

var arr = new Array();

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

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

arr.push(allTags[i]);

}

}

return arr;

}

function searchMin(arr){

var min = arr[0];

var index = 0;

for(var j = 0; j < arr.length; j++){

if(arr[j] < min){

min = arr[j];

index = j;

}

}

return [index,min];

}

function checkScrollSlide(){

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

var boxArr = getByClass(parent,'box');

var lastBox = boxArr[boxArr.length-1];

var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);

console.log(lbHeight);

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

console.log(slideH);

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

console.log(winH);

var swHeight = slideH + winH;

return (lbHeight < swHeight) ? true : false;

}

相关文章推荐：