All insert functions are working according to selected insert algorithms, that are set up through 'append' and 'prepend' settings. (Described in next section) To insert items into grid use following functions:
var demoGrid = document.getElementById("#demo-grid");
// You can select one of append/prepend types. (Info in next section)
// By default, "default" for append and "mirrored" for prepend will be used.
// Use 'loadImages: true' setting if inserted items will contain images with dynamic heights
var settings = {
append: "default|reversed",
prepend: "mirrored|default|reversed",
loadImages: true|false
};
var grid = new Gridifier(demoGrid, settings);
// 1 method - appending array of DOM objects:
var gridItems = demoGrid.querySelectorAll(".grid-item");
grid.append(gridItems); // or grid.prepend(gridItems);
// 2 method - alternatively, you can use jQuery per selection:
var $gridItems = $(demoGrid).find(".grid-item");
grid.append($gridItems); // or grid.prepend($gridItems);
// 3 method - instead of manual items collect you can use Gridifier:
grid.append(grid.collectNew()); // or grid.prepend(grid.collectNew());
// Or using shorthands - grid.appendNew(); | grid.prependNew();
// Inserting new items before second grid item
var beforeItem = grid.next(grid.first());
var insertedItems = demoGrid.querySelectorAll(".new-items");
grid.insertBefore(insertedItems, beforeItem);
// Inserting new items after first grid item
var afterItem = grid.first();
var insertedItems = demoGrid.querySelectorAll(".new-items");
grid.insertAfter(insertedItems, afterItem);
// By default Gridifier will insert all items in single batch(no timeouts)
grid.append(grid.collectNew());
// Insert 3 items, wait 40ms, insert 3 items, wait 40ms, etc...
grid.append(grid.collectNew(), 3, 40);
// Insert 3 items, wait 100ms, insert 3 items, wait 100ms, etc...
grid.append(grid.collectNew(), 3);
To ensure that all images are loaded before any insert operation is executed use 'loadImages' setting:
To select used insert algorithms use 'append' and 'prepend' settings:
vertical grid
Insert items in the end(bottom side) of the grid from left to right side.
horizontal grid
Insert items in the end(right side) of the grid from top to bottom side.
vertical grid
Insert items in the end(bottom side) of the grid from right to left side.
horizontal grid
Insert items in the end(right side) of the grid from bottom to top side.
vertical grid
Insert items in the beginning(top side) of the grid accordingly to selected append mode with full relayout of all other items.
horizontal grid
Insert items in the beginning(left side) of the grid accordingly to selected append mode with full relayout of all other items.
vertical grid
Insert items in the beginning(top side) of the grid from left to right side with shifting down all other items.
horizontal grid
Insert items in the beginning(left side) of the grid from bottom to top side with shifting right all other items.
vertical grid
Insert items in the beginning(top side) of the grid from right to left side with shifting down all other items.
horizontal grid
Insert items in the beginning(left side) of the grid from top to bottom side with shifting right all other items.
Mirrored prepends inserts items collection in the beggining of the grid with selected append mode. So, it's making full relayout of all grid items. We had a task, when new items set should be loaded on reaching left side of horizontal grid. It looked like this:
Mirrored prepends had negative impact on UX with such task - on every prepend visible items were changing their positions because of full grid reposition. So, every item x and y coords could be changed. Because of that, we implemented alternative way to insert items in the beggining of the grid - default/reversed prepends:
By default, Gridifier is rendering appended items immediately after append() function calls. You can block items rendering, and than render appended items at specific moment. (For example, when item appears inside viewport) This process is controlled by following 3 functions:
var demoGrid = document.getElementById("#demo-grid");
var settings = {
append: "default|reversed"
};
var grid = new Gridifier(demoGrid, settings);
grid.silentAppend(grid.collectNew());
// In most cases you will want to execute scroll handler logic here right after silentAppend.
// (Grid items can appear in viewport before any scroll events)
// Per this purpose you can use onReposition event:
grid.onReposition(function() {
// Same code as in scroll handler. For example 1:
grid.silentRender(grid.getSilent(true));
});
window.addEventListener("scroll", function() {
// Render silently appended items, that are appearing in viewport on scrolls
grid.silentRender(grid.getSilent(true));
});
window.addEventListener("scroll", function() {
// Render all items, when any from silently appended appears inside viewport
var scheduledItems = grid.getSilent(true);
if(scheduledItems.length > 0)
grid.silentRender(); // Without first param, all items will be rendered
});
window.addEventListener("scroll", function() {
var scheduledItems = grid.getSilent(true);
if(scheduledItems.length == 0)
return;
// By default Gridifier will render all items in single batch(no timeouts)
grid.silentRender();
// Render 3 items, wait 40ms, render 3 items, wait 40ms, etc...
grid.silentRender(null, 3, 40);
// or grid.silentRender(grid.getSilent(), 3, 40);
});
Opposite to inserts, Gridifier provides a few functions to disconnect items from grid:
var demoGrid = document.getElementById("#demo-grid");
var grid = new Gridifier(demoGrid);
grid.append(grid.collectNew());
// 1. Disconnect item on click
TouchClickEvent.listen(demoGrid, ".grid-item", function(event) {
grid.disconnect(event.target);
});
// 2. Disconnect all items on special button click
TouchClickEvent.listen(document.getElementById("disconnect-all"), function() {
grid.disconnect(grid.all());
});
// 3. Disconnect first grid item
TouchClickEvent.listen(document.getElementById("pop"), function() {
var disconnectedItem = grid.pop();
});
// 4. Disconnect last grid item
TouchClickEvent.listen(document.getElementById("shift"), function() {
var disconnectedItem = grid.shift();
});
// 5. You can listen for disconnect event to remove item from DOM.
// Disconnect event will fire after hide animation finish.
grid.onDisconnect(function(item) {
item.parentNode.removeChild(item);
});