原生JavaScript实现瀑布流布局

原生JavaScript瀑布流布局的实现秘籍

我们将深入如何使用原生JavaScript实现瀑布流布局。通过详细的代码示例，我们将一同揭开瀑布流布局的神秘面纱。如果你对这方面感兴趣，那么这篇文章将为你提供宝贵的参考。

一、效果预览

二、核心代码

当页面加载完成时，我们开始初始化瀑布流布局：

```javascript

window.onload = function() {

// 初始化瀑布流布局

waterfall('main', 'pin');

// 模拟的数据源

var dataInt = {'data': [{'src':'1.jpg'}, {'src':'2.jpg'}, {'src':'3.jpg'}, {'src':'4.jpg'}]};

// 当页面滚动时，加载更多内容

window.onscroll = function() {

if (checkscrollside()) { // 检查是否滚动到页面底部

var oParent = document.getElementById('main'); // 获取父级元素

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

// 创建新的块级元素并添加到父级元素中

var oPin = document.createElement('div');

oPin.className = 'pin';

oParent.appendChild(oPin);

var oBox = document.createElement('div');

oBox.className = 'box';

oPin.appendChild(oBox);

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

oImg.src = './images/' + dataInt.data[i].src;

oBox.appendChild(oImg);

}

// 重新布局瀑布流

waterfall('main', 'pin');

}

};

}

```

接下来，我们`waterfall`函数的工作原理：

```javascript

function waterfall(parent, pin) {

var oParent = document.getElementById(parent); // 获取父级元素

var aPin = getClassObj(oParent, pin); // 获取所有的pin元素组成的数组

var iPinW = aPin[0].offsetWidth; // 获取一个pin元素的宽度

var num = Math.floor(document.documentElement.clientWidth / iPinW); // 计算每列能容纳的pin个数

oParent.style.cssText = 'width:' + (iPinW num) + 'px;margin:0 auto;'; // 设置父级元素的宽度和居中样式

var pinHArr = []; // 用于存储每列中所有块框的高度之和

// ...（此处省略了waterfall函数的其余部分）

}

```

通过以上的代码，我们深入了解了如何使用原生JavaScript实现瀑布流布局。希望这篇文章能为你带来启发和收获。如果你有任何疑问或需要进一步，请随时与我们交流。

```javascript

//遍历数组aPin的每个块框元素

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

var pinH = aPin[i].offsetHeight; //获取当前块框的高度

if (i < num) { //如果是第一行中的num个块框

pinHArr[i] = pinH; //将这些块框的高度添加到数组pinHArr中

} else {

var minH = Math.min.apply(null, pinHArr); //找到数组pinHArr中的最小高度

var minHIndex = getMinHIndex(pinHArr, minH); //获取最小高度的索引

aPin[i].style.position = 'absolute'; //设置绝对定位

aPin[i].style.top = minH + 'px'; //设置块框的顶部位置为最小高度值

aPin[i].style.left = aPin[minHIndex].offsetLeft + 'px'; //设置块框的左边位置为最小高度元素的位置

//更新添加了块框后的列高

pinHArr[minHIndex] += aPin[i].offsetHeight;

}

}

//通过父级元素获取指定类名的子元素数组

function getClassObj(parent, className) {

var children = parent.getElementsByTagName(''); //获取父级所有子元素

var pinS = []; //创建一个数组用于收集特定类名的子元素

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

if (children[i].className === className) { //判断子元素的类名是否匹配

pinS.push(children[i]); //将匹配的子元素添加到数组中

}

}

return pinS; //返回包含特定类名子元素的数组

}

//获取数组中最小高度的索引

function getMinHIndex(arr, minH) {

for (var i in arr) {

if (arr[i] === minH) { //找到与最小高度匹配的元素索引

return i;

}

}

}

//判断加载图片的条件（是否应该加载更多内容）

function checkScrollSide() {

var mainElement = document.getElementById('main'); //获取主元素

var pins = getClassObj(mainElement, 'pin'); //获取所有类名为'pin'的子元素

var lastPinPosition = pins[pins.length - 1].offsetTop + Math.floor(pins[pins.length - 1].offsetHeight / 2); //计算最后一个块框的位置（距离顶部的距离加上自身高度的一半）

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取页面滚动的顶部位置（兼容多种浏览器）

var documentHeight = document.documentElement.clientHeight; //获取页面可见高度（视口高度）

return lastPinPosition < scrollTop + documentHeight ? true : false; //如果最后一个块框的位置小于滚动条位置加上视口高度，则返回true，否则返回false（表示应该加载更多内容）

}

```