Javascript 响应式封隔器格栅

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

//最新JSFIDLE

这大致就是我试图用固定宽度构建的网格——因此，我不想让块掉落以补偿调整大小，而是想保持块的完整性，但只需调整每个块的宽度——因此，尝试将固定宽度更改为百分比，并保持布局的完整性——直到它达到阈值——然后进行堆叠以便移动 我有一个这样的网格块

//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>

JS

---

你的问题是什么？标准封隔器-但是区块下降以补偿-，这是它可能做到的-，将宽度转换成百分比-，有没有一种方法可以复制这个，而不必使用封隔器？你的问题是什么？标准封隔器-但是区块下降以补偿-，这是它可能做到的-将宽度转换为百分比——有没有一种方法可以在不使用封隔器的情况下复制它？

* { 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;
}

// external js: packery.pkgd.js

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