JS 瀑布流
程序员文章站
2022-06-01 23:30:34
...
第一步 创建模板
首先你的想好，你想要创建几列，然后在body中创建好模板
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>第二步 设置css样式
设置写简单的样式，让每个图片之间有点间隙，通俗易懂点就是，让照片更有视觉冲击力，比较有美感。
*{
padding: 0;
margin: 0;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}第三步 添加图片
现在就是利用js原生循环创建图片和li。
function createImg (count) {
//循环创建
for(var i = 0; i < count; i++) {
//创建图片 和 li
var img = document.createElement("img");
img.src = "美女/" + i + ".jpg";
var li = document.createElement("li");
li.appendChild(img);
}
}
//调用函数
createImg(99);第四步 怎么把图片添加到ul中
这时候就要想想怎么把图片添加到ul，因为这时候图片大小不一样，如果你依次循环添加到ul中，可能会出现长的图片都在一列，短的都在一列，可能会使中间出现一个大的缺口，那么就会很缺少美感。
原创.jpg
所以，我们就可以，每次都找到它的最短的那一列，然后添加到它的后面，不管是谁，只要在添加图片的时候，只要你短，我就在你后面添加的道理。就能有效的避免刚才那种情况的发生了，吼吼，看代码吧......
//获取到所有的ul
var ulArr = document.querySelectorAll("ul");
//假设一个最短的ul
var minHeightUl = ulArr[0];
//循环找到每次最短的然后添加图片
for (var j = 0; j < ulArr.length; j++) {
if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
minHeightUl = ulArr[j];
}
}
minHeightUl.appendChild(li);完整代码
就知道有些人按捺不住，我懂你，把完整代码都给你好了吧！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
var ulArr = document.querySelectorAll("ul");
function createImg (count) {
for(var i = 0; i < count; i++) {
//创建图片 和 li
var img = document.createElement("img");
img.src = "美女/" + i + ".jpg";
var li = document.createElement("li");
li.appendChild(img);
//假设一个最短的ul
var minHeightUl = ulArr[0];
for (var j = 0; j < ulArr.length; j++) {
if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
minHeightUl = ulArr[j];
}
}
minHeightUl.appendChild(li);
}
}
createImg(99);
</script>
</body>
</html>
上一篇： PHP设计模式之：工厂模式
下一篇： 以页面片段作为属性的标签实战