Author: | entroform |
---|---|
Views Total: | 463 views |
Official Page: | Go to website |
Last Update: | June 19, 2022 |
License: | MIT |
Preview:

Description:
Do you want to create a Pinterest-like fluid grid featuring lots of images or even plain text? You can use this stack-up.js library to easily achieve this layout.
It uses plain CSS position property to make elements stack vertically, like a masonry brick wall. It’s lightweight (5.66KB minified), flexible, responsive, and mobile-friendly.
How to use it:
1. Download and load the stack-up.js library in the document.
<script src="stack-up.js"></script>
2. Add grid items to the Masonry Grid.
<div class="gridContainer"> <div class="gridItem"> <img src="assets/images/tall.jpg"> </div> <div class="gridItem"> <img src="assets/images/short.jpg"> </div> <div class="gridItem"> <img src="assets/images/medium.jpg"> </div> <div class="gridItem"> <img src="assets/images/tall.jpg"> </div> ... </div>
3. Position the grid items using CSS.
#gridContainer { position: relative; /* more styles here */ } .gridItem { position: absolute; /* more styles here */ } .gridItem img { width: 100%; /* more styles here */ }
4. Initialize the stack-up.js library and done.
window.onload = function() { var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", }); stackup.initialize(); };
5. Set the width of the grid columns. Default: 320px.
var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", columnWidth: 240, });
6. Set the space between grid items. Default: 18px.
var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", gutter:16, });
7. Determine whether the layout is Fluid. Default: false.
var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", isFluid: true, });
8. Specify the number of columns. Default: 3.
var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", numberOfColumns: 4, });
9. Set the layout mode: ‘optimized’ or ‘ordinal’.
var stackup = new StackUp({ containerSelector: "#gridContainer", itemsSelector: "#gridContainer > .gridItem", layout: "optimized", });
10. Append more grid items to the layout.
var gridContainer = document.getElementById("gridContainer"); var gridItem = document.createElement("div"); gridItem.setAttribute("class", "gridItem"); gridItem.innerHTML = "Item X"; gridContainer.appendChild(gridItem); stackup.append(gridItem);
11. Re-stack the grid items.
stackup.restack();
12. Reset the layout.
stackup.reset();