jQuery 和 jQuery UI : Building a draggable infinite grid with content (imgs) of varying size

Question

本质上，我想(重新)构建这个网站的无限网格:https://grafilu.ch/ ，或者更确切地说是我自己的版本。

为此，我使用插件 Infinite Drag by Ian Li 。

我相信在我用作构建网格的引用的网站上，他们使用类似(如果不相同)的插件并让它生成非常大的图 block ，然后在其中创建另一个网格以用于图片。在下面的屏幕截图中，您可以看到我检查引用站点的代码:

就像我说的，似乎正在使用多个非常大的图 block :

<div class="infinite-grid__grid infinite-grid__grid-1">
…
<div class="infinite-grid__grid infinite-grid__grid-2">
…
<div class="infinite-grid__grid infinite-grid__grid-3">

...每个图像都布置在自己的内部网格(class="infinite-grid__grid-wrapper")中，图像位于各个网格项(class="infinite- grid__item"):

还有一个 class="gutter-sizer"，这让我相信对于图 block 内的图像网格，类似于 Masonry , Isotope或Packery正在使用中。

我已经能够创建一个带有大图 block 的可拖动网格，并使用 Packery 在每个图 block 内布置一些图片。

您可以在此处查看我尝试对该网格进行编程的当前版本:https://codepen.io/joSch/pen/eMPVve

但这离我想要的还很远:

• 图 block 内的网格不会覆盖整个图 block 。我相信这是因为同位素(我用它来生成图 block 内图像的网格)将其网格设置为与其内容一样大。如何使图像的网格覆盖每个整个图 block 并在整个图 block 上布局其内容(图像)？目前，每个图像网格下方总是有大量的空白空间。

• 每个图 block 都有相同的网格。现在，我正在通过 Infinite Drag 的 oncreate 选项附加同位素标记，以将图像网格构建到每个图 block 。因此，每个图 block 都包含相同的标记。每个图 block 如何接收单独的内容？

我正在解决这个问题。如果您提供有关如何创建与引用的网格类似的网格的任何有用的信息，我将不胜感激。

Answer 1

我认为您的代码中犯了几个错误。
我已尽力修复它。
https://codepen.io/anon/pen/xjwgJy
HTML:

<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, 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');
  }
});

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