我想要做的是基于流体列宽实现IE8 +响应式mansonry布局。
当网站呈现时,mansonry工作正常,但在调整窗口大小后 - 媒体查询会出现一个动作,并告诉列现在应该是50%,50%而不是25%,25%,25%,25%。调整窗口大小后,Mansonry无法正常工作。
我想避免在JavaScript中编写计算。
工作示例 Codepen Demo
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
<div class="container js-masonry">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item wide-2">item3 wide-2</div>
<div class="item">item 4</div>
<div class="item wide-2 tall-2">item 5 wide-2 tall-2</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
</div>
CSS
.container {
overflow: hidden;
}
.item {
height: 50px;
float: left;
outline: solid 1px white;
&.wide-2,
&.tall-2 {
background: gray;
}
&.tall-2 {
height: 100px;
}
}
@media (max-width : 500px){
.item {
background: green;
width: 50%;
&.wide-2 {
width: 100%;
}
}
}
@media (min-width : 501px){
.item {
background: blue;
width: 25%;
&.wide-2 {
width: 50%;
}
}
}