Question

如果它不起作用，我将使用packery或硬编码变体。但是我想用一些东西来定位绝对的网格，但要保持它的响应性 - 不要让项目下降来补偿，但使用百分比保留它们的位置。

//最新的jsfiddle http://jsfiddle.net/q4kp3z80/1/

这大致是我试图用固定宽度构建的网格 - 所以不是块下降来补偿调整大小我想保持块完整但只是调整每个块的宽度---所以尝试并更改固定宽度百分比并保持布局完好 - 直到它达到阈值 - 然后堆叠移动我有这样的网格块

// HTML

<h1>Packery - animate responsive item size</h1>



<div class="grid">

  <div class="grid-item height5 width2">
    Item 1  w: 254 h: 407
  </div>
  <div class="grid-item height2 width">
    Item 2 w: 232 h: 228
  </div>
  <div class="grid-item height2 width5">
    Item 3 w: 286 h: 228
  </div>
  <div class="grid-item height2 width5">
    Item 4 w: 286 h: 228
  </div>
  <div class="grid-item height2 width">
    Item 5 w: 286 h: 228
  </div>
  <div class="grid-item height3 width7">
    Item 6 w: 370 h: 260
  </div>
  <div class="grid-item height3 width8">
    Item 7 w: 410 h: 260
  </div>
  <div class="grid-item height3 width6">
    Item 8 w: 306 h: 260
  </div>
  <div class="grid-item height4 width2">
    Item 9 w: 254 h: 275
  </div>
  <div class="grid-item height width9">
    Item 10 w: 548 h: 189
  </div>
  <div class="grid-item height width3">
    Item 11 w: 272 h: 189
  </div>
  <div class="grid-item height width4">
    Item 12 w: 266 h: 189
  </div>
</div>

// CSS

* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

.grid {
  background: #EEE;
  max-width: 1440px;
}

/* item is invisible, but used for layout */


.grid-item {
  float: left;
  height: 100px;
  width: 100px;
  background: grey;
}



.width{
  width: 232px;
}
.width2{
  width: 254px;
}
.width3{
  width: 272px;
}
.width4{
  width: 266px;
}
.width5{
  width: 286px;
}
.width6{
  width: 306px;
}
.width7{
  width: 370px;
}
.width8{
  width: 410px;
}
.width9{
  width: 548px;
}



/*height*/
.height{
  height: 189px;
}
.height2{
  height: 228px;
}
.height3{
  height: 260px;
}
.height4{
  height: 275px;
}
.height5{
  height: 407px;
}

JS

// external js: packery.pkgd.js

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  percentPosition: true,
  gutter: 10
});

响应式包装网格

0 个答案: