下面是我的Masonry UI代码,我使用的是纯CSS
如果有超过4张牌,这种方法效果很好,但如果我使用4张以下的牌,column-count: 3;则效果不佳.
body{
height:1000px;
}
ul {
list-style: none;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
padding: 0px 4px 4px 4px;
margin-top: -10px;
display: inline-block;
width: 100%;
margin: 0px;
}
li {
width: 100%;
display: inline-block;
box-shadow: none;
background: transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 2%;
}
li div {
border-radius: 3px;
background-color: #f4faff;
box-shadow: 0px 0px 4px rgba(0, 0, …