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

Question

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

为此,我正在使用Ian Li的插件Infinite Drag.

我相信我正在使用的网站作为构建网格的参考,他们使用类似的(如果不是相同的)插件并生成非常大的图块,然后在图像内部创建另一个网格.在下面的屏幕截图中,您可以看到我检查参考站点的代码:

就像我说的,似乎正在使用多个非常大的瓷砖:

<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",这让我相信,对于瓷砖内部的图像网格,正在使用像砌体,同位素或Packery这样的东西.

我已经能够创建一个带有大型瓷砖的可拖动网格,并使用Packery在每个瓷砖内部布置一些图片.

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

但它远非我想要的:

• 瓷砖内的网格不会覆盖整个瓷砖.我相信这是因为同位素(我正在使用它来为图块内部的图像生成网格)将其网格设置为与其内容一样大.如何使图像的网格覆盖整个图块并在整个图块上布置其内容(图像)？现在,每个图像网格下面总是有大量的空白空间.

• 每个图块都具有相同的网格.现在,我正在为Isotope附加标记,通过oncreateInfinite Drag选项为每个图块构建图像网格.因此每个磁贴都包含相同的标记.每个磁贴如何接收单个内容？

我正在困惑这个过程.我很感激有关如何创建类似于引用的网格的任何有用的输入.

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

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