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

Question

Essentially, I would like to (re-)build the infinite grid of this site: https://grafilu.ch/, or rather my own version of it.

To do so, I am using the plugin Infinite Drag by Ian Li.

I believe on the site I'm using as a reference for building the grid, they use a similar (if not the same) plugin and have it generate very large tiles, which then have another grid created inside of them for the images. In the screenshot below you can see me inspecting the reference-site's code:

Like I said, it seems like multiple, very large tiles are being used:

<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">

… which each have the images laid out in their own inner grid (class="infinite-grid__grid-wrapper") with the images inside individual grid items (class="infinite-grid__item"):

There is also a class="gutter-sizer", which leads me to believe that for the image grid inside the tiles something like Masonry, Isotope or Packery is being used.

I have gotten as far as being able to create a draggable grid with large tiles and use Packery to lay out some pictures inside of each tile.

You can see the current version of my attempt to program this grid here: https://codepen.io/joSch/pen/eMPVve

But its far from what I want:

The grids inside the tiles do not cover the entire tile. I believe this is because Isotope (which is what I'm using to generate the grid for the images inside the tiles) sets its grids to be as large as their content. How can I make the grids for the images cover each entire tile and lay out their content (the images) across the whole tile? Right now, there is always a large amount of empty space underneath each image-grid.
Each tile has the same grid. Right now, I am appending the markup for Isotope to build the image grid to each tile via the oncreate option of Infinite Drag. Hence every tile is containing the same markup. How can each tile receive individual content?

I'm in the process of puzzling this out. I'd appreciate any helpful input on how to create a grid similar to the one referenced.

The Ian Li example doesn't work at all because it's trying to include all its scripts using HTTP, whereas Github.io uses HTTPS. — BoffinBrain, Apr 18 '18 at 13:33

score 0 · Answer 1 · answered Apr 22 '18 at 02:02

I think you made several errors in your code.
I fixed it as I could.
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');
  }
});

I also changed sizes for images. Because isotope can't resize your blocks it can only place them in proper places. I believe you can figure out sizes for blocks and to add images as backgrounds with background-size: contain or cover.
So you will have 3-4 templates with sizes in percent and you can add them in random order on page.
Also you can try to use sizes in pixels. Maybe it would work better for you. Like here: https://codepen.io/anon/pen/zjvojo
And there is no infinite drag jQuery plugin on the site, you sent as example. I'm not sure if it's good idea to use it. I'd rather write my own plugin to make such site than use infinite drag.

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

1 Answers1