html 无限瀑布流,无限瀑布流html

无限瀑布流html

贡献者：jsonbin

类别：代码 时间：2016-11-25 19:15:45 收藏数：32 评分：0

返回上页

举报此文章

请选择举报理由：

广告/谣言/欺诈

政治敏感

色情/违法信息

垃圾文章

其他

收藏到我的文章

改错字

Document

div{width: 300px;background: red;position: absolute;font-size: 50px;transition: 0.5s;}

var arrH = [];//记录每一列的高度

var k = 0;

createDiv(20)

change()

//创建DIV

function createDiv(n) {

for (var i = 0; i < n; i++) {

k++;

var div = document.createElement("div");

div.style.height = rndFn(100,300) + "px";

div.innerHTML = k;

document.body.appendChild(div);}}

function change() {

//屏幕宽度

var winW = document.documentElement.clientWidth;

//获取所有DIV

var aDiv = document.querySelectorAll("div");

//计算一行放多少列

var num = parseInt(winW/(aDiv[0].offsetWidth+10));

//计算空余位置的一半

var center = (winW - (num*310-10))/2;

// 0 310 620 930

arrH = [];

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

if (i

aDiv[i].style.left = center+i*(300+10) + "px";

aDiv[i].style.top = 0;

//记录每一列的高度

arrH[i] = aDiv[i].offsetHeight+10;

// arrH.push(aDiv[i].offsetHeight+10)

}else{

var min = findMin(arrH);

aDiv[i].style.left = center+min*(300+10) + "px";

aDiv[i].style.top = arrH[min] + "px";

arrH[min] += aDiv[i].offsetHeight + 10;}}}

function findMin(arr) {

var min = arr[0];

var index = 0;

for (var i = 1; i < arr.length; i++) {

if (min>arr[i]) {

min = arr[i];

index = i;}}

return index;}

function rndFn(min,max) {

return Math.round(Math.random()*(max-min)+min);}

window.onresize = function () {

change();}

window.onscroll = function () {

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

var winH = document.documentElement.clientHeight;

if (sTop+winH+20>=arrH[0]) {

createDiv(10);

change();}}

声明：以上文章均为用户自行添加，仅供打字交流使用，不代表本站观点，本站不承担任何法律责任，特此声明！如果有侵犯到您的权利，请及时联系我们删除。