jQuery和jQuery UI：使用不同大小的内容(imgs)构建一个可拖动的无限网格

<div id="viewport">
  <div id="wall"></div>
</div>

CSS：

html,body{
  width: 100%;
  height: 100%;
}
* { Box-sizing: border-Box; }

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

#viewport {
  width: 100%;
  height: 100%;
}

.draggable--holder {
  height: 100%;
}

#wall {
  height: 100%;
}

#wall ._tile {
  font-size: 24px;
  font-weight: bold;

  BACkground-color: transparent;

  overflow: hidden;
}

#wall ._tile:hover {
  BACkground-color: #34a65f;
}

.grid {
  BACkground: #ddd;

  width: 1000px;
  height: 1075px;
}

/* clear fix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}
.gutter-size{
  width: 1%;
  height: 1%;
}
/* ---- .grid-item ---- */

.grid-item {
  float: left;

  BACkground: #0d8;

  margin: 0;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: 100%;
}

.grid-item img:hover {
  opacity: 0.5;
}

.grid-item--col1 {
  width: calc(8.25% * 1);
}
.grid-item--col2 {
  width: calc(8.25% * 2);
}
.grid-item--col3 {
  width: calc(8.25% * 3);
}
.grid-item--col4 {
  width: calc(8.25% * 4);
}
.grid-item--col5 {
  width: calc(8.25% * 5);
}
.grid-item--col6 {
  width: calc(8.25% * 6);
}
.grid-item--col7 {
  width: calc(8.25% * 7);
}
.grid-item--col8 {
  width: calc(8.25% * 8);
}
.grid-item--col9 {
  width: calc(8.25% * 9);
}
.grid-item--col10 {
  width: calc(8.25% * 10);
}
.grid-item--col11 {
  width: calc(8.25% * 11);
}
.grid-item--col12 {
  width: calc(8.25% * 12);
}

/* -------------------------- */

JavaScript的：

var infinitedrag = jQuery.infinitedrag("#wall",{},{
  width: 1000,height: 1075,start_col: 1,start_row: 1,range_col: [-1,1],range_row: [-1,oncreate: 
  function($element,col,row) {
    $element.append(
      `<div class="grid">
          <div class="gutter-size"></div>
          <div class="grid-item grid-item--col3"><img src="https://placeimg.com/640/480/animals"></div>
          <div class="grid-item grid-item--col5"><img src="https://placeimg.com/640/480/animals"></div>
          <div class="grid-item grid-item--col3"><img src="https://placeimg.com/640/480/animals"></div>
          <div class="grid-item grid-item--col12"><img src="https://placeimg.com/640/480/animals"></div>
       </div>`
    )
    var $grid = $element.find('.grid').packery().isotope({
      layoutMode: 'packery',itemSELEctor: '.grid-item',percentPosition: true,packery: {
        gutter: '.gutter-size'
      }
    });
    $grid.packery('reloadItems');
  }
});

我也改变了图像的大小.由于同位素无法调整块的大小,因此只能将它们放置在适当的位置.我相信你可以计算出块的大小,并将图像添加为背景大小的背景：包含或覆盖.
因此,您将拥有3-4个大小均为百分比的模板,您可以在页面上以随机顺序添加它们.
您也可以尝试使用像素大小.也许它对你来说会更好.像这里：https://codepen.io/anon/pen/zjvojo并且网站上没有无限拖动jQuery插件,您发送的示例.我不确定使用它是否是个好主意.我宁愿编写自己的插件来制作这样的网站而不是使用无限拖动.