无限瀑布流html
贡献者:jsonbin
类别:代码 时间:2016-11-25 19:15:45 收藏数:32 评分:0
返回上页
举报此文章
请选择举报理由:
广告/谣言/欺诈
政治敏感
色情/违法信息
垃圾文章
其他
收藏到我的文章
改错字
Documentdiv{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();}}
声明:以上文章均为用户自行添加,仅供打字交流使用,不代表本站观点,本站不承担任何法律责任,特此声明!如果有侵犯到您的权利,请及时联系我们删除。