网上查找了许多瀑布流布局发现,自己想要的就是APP商城的两栏瀑布流布局,不需要那么多条件,搜索了好久找不到,于是自己写一个希望踏入前端的新手不用像我一样白白耗费那么多的时间
效果图如下:
样式具体代码如下:
代码片
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.item {
width: 50%;
display: inline-block;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
break-inside: avoid;
}
.item:nth-child(2n) {
color: yellow;
float: right;
}
.item:nth-child(2n+1) {
color: red;
float: left;
}
li {
list-style: none;
}
.item img {
width: 100%;
}
</style>
<button id="btn">添加三张图片</button>
<ul class="box">
<li class="item">
<img src="./img/1.png" alt="" />1
</li>
<li class="item">
<img src="./img/2.png" alt="" />2
</li>
<li class="item">
<img src="./img/2.png" alt="" />3
</li>
<li class="item">
<img src="./img/1.png" alt="" />4
</li>
</ul>
---------------------------
<script>
function clickAdd() {
console.log(1)
let str = "";
// 先获取
var b=5;
var box = document.getElementsByClassName("box")[0]
let k = 6 / 2; //一次加6条数据 分为两组 一组大约为3个
for (let i = 0; i < 6; i++) {
str += `<li class="item">
<img src="./img/${i % 2 == 1 ? 2 : 1}.png" alt="" />${b}
</li>`
b++;
}
// 添加 子元素 box
box.innerHTML += str
str = null;
}
var btn = document.getElementById("btn")
btn.onclick = clickAdd
</script>