JS实现图片瀑布流

最新推荐文章于 2022-05-26 20:53:57 发布

Aenm

最新推荐文章于 2022-05-26 20:53:57 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/qq_44567078/article/details/96422575

版权

注意
1. 在列表的父元素设置，列数column-count；在子元素li中设置宽度
2. 它应该有默认的缝隙，对于移动端来说有点大，然后就需要自己设置列之间的缝隙column-gap值
3. 还有个问题是，子元素li不能设置margin，会影响计算，只能设置padding

源码：

<!DOCTYPE html>

<head>

margin: 0px;

padding: 0px;

}

#superDivID{

position: relative;

}

.baseDivClass{

padding: 5px;

float: left;

}

.imgDivClass{

/*内边距*/

padding: 5px;

/*边框*/

border: 1px solid #66CCFF;

/*圆角*/

border-radius: 5px;

/*阴影*/

box-shadow: 0px 1px 5px #66CCFF;

}

.imgDivClass img{

width: 200px;

height: auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

var sectionHeights = [];// 获取第一列的高度，自后每张图都加载到该去的位置

window.onload = function () {// 窗口加载时触发

var superDiv = parameterSuperDiv();

var baseDivs = parmeterBaseDivs();

setLoadPictureOnRowAction(superDiv, baseDivs);

}

function parameterSuperDiv () {// 父视图div

return document.getElementById("superDivID");

}

function parmeterBaseDivs () {// 图片根视图divs

return getAllBaseDivAction(parameterSuperDiv(), "baseDivClass");

}

// 获取所有的baseDiv

function getAllBaseDivAction (superDiv, divClass) {

var resultDivs = [];

// tag name传"*"表示获取所有的子节点

var subViews = superDiv.getElementsByTagName("*");

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

var tempView = subViews[i];

if (tempView.className == divClass) {

resultDivs.push(tempView);

}

return resultDivs;

}

// 根据窗口大小确定每行加载图片的张数

function setLoadPictureOnRowAction (superDiv, baseDivs) {

var screenWidth = document.body.offsetWidth;

var baseDivWidth = baseDivs[0].offsetWidth;

var number = Math.floor(screenWidth/baseDivWidth);

// 更改样式，固定每行显示几张图片

superDiv.style.cssText = "width:"+baseDivWidth*number+"px;margin:0 auto"; // 居中

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

var tempDiv = baseDivs[i];

if (i < number) {

sectionHeights.push(tempDiv.offsetHeight);

} else {

// 获取到列高数组中最短的高度

var minHeight = Math.min.apply(null, sectionHeights);

// 获取最短高度的索引

var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);

// 放置div

tempDiv.style.position = "absolute"; // 绝对布局

tempDiv.style.top = minHeight + "px";

tempDiv.style.left = baseDivs[minIndex].offsetLeft+"px";

// 更新列高数组

sectionHeights[minIndex] = sectionHeights[minIndex] + tempDiv.offsetHeight;

}

// 获取最短高度的索引

function getMinHeightIndexAction (heightArr, height) {

for (var i in heightArr) {

if (heightArr[i] == height) {

return i;

}

// 拖动滚动条时触发

window.onscroll = function () {

if (judgeHandleAction()) {

var superDiv = parameterSuperDiv();

var baseDivs = parmeterBaseDivs();

var dataArr = getDataActon().data;

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

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

tempBaseDiv.className = "baseDivClass";

superDiv.appendChild(tempBaseDiv);

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

tempImgDiv.className = "imgDivClass";

tempBaseDiv.appendChild(tempImgDiv);

var tempImg = document.createElement("img");

tempImg.src = dataArr[i].href;

tempImgDiv.appendChild(tempImg);

// 获取到列高数组中最短的高度

var minHeight = Math.min.apply(null, sectionHeights);

// 获取最短高度的索引

var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);

// 放置div

tempBaseDiv.style.position = "absolute"; // 绝对布局

tempBaseDiv.style.top = minHeight + "px";

tempBaseDiv.style.left = baseDivs[minIndex].offsetLeft+"px";

// 更新列高数组

sectionHeights[minIndex] = sectionHeights[minIndex] + tempBaseDiv.offsetHeight;

}

// 判断是否执行操作，滚动至最后一张图片

function judgeHandleAction () {

var superDiv = parameterSuperDiv();

var baseDivs = parmeterBaseDivs();

var lastTopHeight = baseDivs[baseDivs.length-1].offsetTop;

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

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

if (lastTopHeight <= scrollTop + scrollHeight) {

return true;

}

</script>

</body>

</html>

实现效果：

Aenm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片瀑布流

注意1. 在列表的父元素设置，列数column-count；在子元素li中设置宽度2. 它应该有默认的缝隙，对于移动端来说有点大，然后就需要自己设置列之间的缝隙column-gap值3. 还有个问题是，子元素li不能设置margin，会影响计算，只能设置padding源码：<!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫