当与媒体查询结合使用时,jQuery Mansonry插件不会重新呈现

时间:2015-02-14 14:14:59

标签: css responsive-design fluid-layout dynamic-columns

我想要做的是基于流体列宽实现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%;
    }
  }
}

grid1 grid2

0 个答案:

没有答案