Question

基本上，我想（重新）构建此站点的无限网格：https://grafilu.ch/，或者更确切地说是我自己的版本。

我相信我正在使用的网站作为构建网格的参考，他们使用类似的（如果不是相同的）插件并生成非常大的图块，然后在其中创建另一个网格用于图片。在下面的屏幕截图中，您可以看到我检查引用站点的代码：

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

<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"，这让我相信，对于瓷砖内部的图像网格，正在使用Masonry，Isotope或Packery。< / p>

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

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

但它远非我想要的：

瓷砖内的网格不会覆盖整个瓷砖。我相信这是因为同位素（我正在使用它来为图块内部的图像生成网格）将其网格设置为与其内容一样大。如何使图像的网格覆盖整个图块并在整个图块上布置其内容（图像）？现在，每个图像网格下面总是有大量空白空间。
每个图块都有相同的网格。现在，我附加了Isotope的标记，通过Infinite Drag的oncreate选项为每个图块构建图像网格。因此每个磁贴都包含相同的标记。每个磁贴如何接收单个内容？

我正在解开这个问题。我很感激有关如何创建类似于引用的网格的任何有用的输入。

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插件，您发送的示例。我不确定使用它是否是个好主意。我宁愿编写自己的插件来制作这样的网站而不是使用无限拖动。

jQuery＆amp; jQuery UI：构建一个可拖动的无限网格，其中包含不同大小的内容（imgs）

1 个答案: