<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3瀑布流</title>
<style>
/*大层*/
.container{width:80%;margin: 0 auto;}
/*瀑布流层*/
#waterfall{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #f3f3f3;
}
.item img{
width: 100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="container">
<div id="waterfall">
</div>
</div>
</body>
</html>
引入原生js ajax 访问链接：https://www.jianshu.com/p/af8f292eeea0
<script src="./ajax.js"></script>
<script>
ajax({
method:"get",
url:"https://api.it120.cc/small4/shop/goods/list",
success:function(res){
let obj=JSON.parse(res);
//获取dom节点
var container=document.getElementById('waterfall');
//循环数据
for(var i=0;i<obj.data.length;i++){
container.innerHTML+='<div class="item"><img src='+obj.data[i].pic+'><p>'+obj.data[i].name+'</p></div>'
}
}
})
</script>
网友评论