jQuery 和 jQuery UI：构建一个可拖动的无限网格，其中包含不同大小的内容 (imgs)

Posted 2023-05-08

【中文标题】jQuery 和 jQuery UI：构建一个可拖动的无限网格，其中包含不同大小的内容 (imgs)

【英文标题】：jQuery & jQuery UI: Building a draggable infinite grid with content (imgs) of varying size

【发布时间】：2018-09-16 02:26:33

【问题描述】：

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

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

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

就像我说的那样，似乎正在使用多个非常大的图块：

<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 之类的东西。

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

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

但这远不是我想要的：

图块内的网格不会覆盖整个图块。我相信这是因为同位素（这是我用来为图块内的图像生成网格的）将其网格设置为与其内容一样大。如何使图像的网格覆盖整个图块并在整个图块中布置它们的内容（图像）？现在，每个图像网格下方总是有大量空白空间。

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

我正在解决这个问题。对于如何创建类似于所引用的网格的任何有用的输入，我将不胜感激。

【问题讨论】：

你链接的codepen没有显示结果？

Ian Li 示例根本不起作用，因为它试图使用 HTTP 包含其所有脚本，而 Github.io 使用 HTTPS。

【参考方案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');
  
);

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