如何使用纯css实现瀑布流布局
这篇文章主要为大家展示了“如何使用纯css实现瀑布流布局”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用纯css实现瀑布流布局”这篇文章吧。
创新互联专业为企业提供山阳网站建设、山阳做网站、山阳网站设计、山阳网站制作等企业网站建设、网页设计与制作、山阳企业网站模板建站服务,十多年山阳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
1、纯css瀑布流布局代码:
/*大层*/
.container{width:100%;margin:0auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4;/*Firefox*/
-webkit-column-count:4;/*Safari和Chrome*/
column-count:4;
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
}
/*一个内容层*/
.item{
padding:1em;
margin:001em0;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
border:1pxsolid#000;
}
.itemimg{
width:100%;
margin-bottom:10px;
}
风景图1
风景图2
风景图3
风景图4
风景图5
纯css瀑布流布局效果如下:
2345截图20180928111644.png
2、jquery简易瀑布流布局的实现代码:
*{
margin:0;
padding:0;
}
body{
min-height:200vh;
}
div{
width:90%;
margin:auto;
}
ul{
margin-top:10px;
list-style:none;
}
li{
border:1pxsolid#000;
border-radius:5px;
width:24%;
float:left;
margin-right:2px;
}
img{
width:98%;
display:block;
margin:auto;
margin-bottom:5px;
}
varimgData={
data:[{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
{
src:"https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
]
};
varcount=0;
$(window).on('scroll',function(){
$.each(imgData.data,function(index,value){
var$oImg=$('').attr('src',$(this).attr("src"));
$oImg.appendTo($('li:eq('+count%4+')'))
count++;
})
})
以上是“如何使用纯css实现瀑布流布局”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:如何使用纯css实现瀑布流布局
当前路径:http://scyanting.com/article/gccjoh.html