Html
    Css
    Js

    
                        
.body {
	margin:0;
	padding:0;
	background:#333;
}
.container {
	width:1200px;
	margin:20px auto;
	columns:4;
	column-gap:40px;
}
.container .box {
	width:100%;
	margin:0 0 20px;
	padding:10px;
	background:#fff;
	overflow:hidden;
	break-inside:avoid;
}
.container .box img {
	max-width:100%;
}
@media(max-width:1200px) {
	.container {
	columns:3;
	width:calc(100% - 40px);
	box-sizing:border-box;
	padding:20px 20px 20px 0;
}
}@media(max-width:768px) {
	.container {
	columns:2;
}
}@media(max-width:480px) {
	.container {
	columns:1;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css实现瀑布流

更新时间:2020-03-09 12:14:18

几句css代码就可以实现瀑布流。还加了自适应。

0