【Javascript】固定幅、可変高さのグリッドレイアウトを作成できるstack-up

Javascript

stack-up.js

March 9, 2018

stack-upは固定幅、可変高さのグリッドレイアウトを作成するのに役立つ、シンプルで高速なJavaScriptプラグイン。

Getting started

stack-up.jsを組み込みます。

<!-- Example HTML -->
<div id="gridContainer">
  <div class="gridItem">...</div>
  <div class="gridItem">...</div>
  <div class="gridItem">...</div>
</div>

<!-- Scripts -->
<script src="js/stack-up.js"></script>

Minimum CSS requirements

#gridContainer {
  position: relative;
}

.gridItem {
  position: absolute;
}

.gridItem img {
  width: 100%;
}
// One way to make sure everything is loaded is
// to wrap the initializer inside window onload.
window.onload = function() {

  // Create a stackup object.
  var stackup = new StackUp({
    containerSelector: "#gridContainer",
    itemsSelector    : "#gridContainer > .gridItem",
    columnWidth      : 240,
  });
  // Initialize stackup.
  stackup.initialize();

};

Config

カスタマイズ可能。

stackup.setConfig({
  columnWidth        : 320,
  gutter             : 18,
  isFluid            : false,
  layout             : "ordinal", // ordinal, optimized
  numberOfColumns    : 3,
  resizeDebounceDelay: 350
});

// This function allows you to modify how each item is moved or animated.
stackup.config.moveItem: function(item, left, top, callback) {
  item.style.left = left + "px";
  item.style.top  = top + "px";
  // The callback function is required to continue operation.
  callback();
};

// This one allows you to modify how the container scales.
stackup.config.scaleContainer: function(container, width, height, callback) {
  container.style.width  = width + "px";
  container.style.height = height + "px";
  // The callback function is required to continue operation.
  callback();
};

Reset and restack

stackup.config.layout = 'optimized';
stackup.restack();
stackup.config.columnWidth = 220;
stackup.reset();

Append

再計算せずに新しいグリッド項目を追加

// Get container element.
var gridContainer = document.getElementById("gridContainer");

// Create a new grid item element.
var gridItem = document.createElement("div");
gridItem.setAttribute("class", "gridItem");
gridItem.innerHTML = "blah blah";

// Append the new grid item element into container element.
gridContainer.appendChild(gridItem);

// Append it to stackup.
stackup.append(gridItem);

MIT

Latest Posts

Related Posts