瀑布流布局

embedded/2024/11/14 4:16:04/

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瀑布流</title>
</head><style>* {margin: 0;padding: 0;}#container {position: relative;}.box {float: left;width: 350px;padding: 5px;}img {width: 100%;}
</style><body><div id="container"><div class="box"><img src="C:\Users\JLZ\Pictures\Sketchpad.png"></div><div class="box"><img src="C:\Users\JLZ\Pictures\cat.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\th1.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\test.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\查看.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\下载.png"></div><div class="box"><img src="C:\Users\JLZ\Pictures\th1.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\test.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\查看.jpg"></div><div class="box"><img src="C:\Users\JLZ\Pictures\下载.png"></div><div class="box"><img src="C:\Users\JLZ\Pictures\test.jpg"></div></div>
</body><script>window.onload = () => {imgLocation('container', 'box')}function imgLocation(parent, content) {const cparent = document.getElementById(parent)const ccontent = getChildElement(cparent, content)const imgWidth = ccontent[0].offsetWidthconst num = Math.floor(document.documentElement.clientWidth / imgWidth)cparent.style.width = `${imgWidth * num}px`const BoxHeightArr = []for (var i = 0; i < ccontent.length; i++) {if (i < num) {//第一行的图片BoxHeightArr.push(ccontent[i].offsetHeight)// 起初通过.offsetHeight获取的高度与实际高度不一致，原因在于left的div里有img// 必须等到页面加载完毕之后才能正确获取content的高度，所以在onload方法里获取content高度才是实际的高度// console.log(ccontent[i].offsetHeight);}else { const minHeight = Math.min.apply(null, BoxHeightArr)const minIndex = BoxHeightArr.indexOf(minHeight)//摆放图片的位置ccontent[i].style.position = 'absolute'ccontent[i].style.top = minHeight + 'px'ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'//更新这一列的高度BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight}}}function getChildElement(parent, child) {const childArr = []const allChild = parent.getElementsByTagName('*')for (var i = 0; i < allChild.length; i++) {if (allChild[i].className === child) {childArr.push(allChild[i])}}return childArr}
</script>
</html>

瀑布流布局

相关文章

01、创建型-单例模式--只有一个实例

CLIP图生文

python常见的语法详解

递归、搜索与回溯算法——穷举vs暴搜vs深搜

大数据集群中部署Hive

Golang实现一个批量自动化执行树莓派指令的软件(2)指令

Redis 如何实现分布式锁

Kotlin语法入门-访问和属性修饰符(5)