Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid

Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid

Gridify Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid.

Gridify Lightweight, simple and pure javascript plugin that creates a Pinterest-like grid.

Usage

Add script tag before your closing </body> tag:

<script src="gridify.min.js"></script>

Settings

Option Type Default Description
containerSelector string .grid Selector for grid items container
itemSelector string .grid--item Selector for grid item
columnSelector string .grid--column Selector for grid column
resizable boolean true Enables window resize event

Initialize without options:

const gridify = new Gridify();

Initialize with options:

const defaultOptions = {
  containerSelector: '.grid',       // selector for items container
  itemSelector: '.grid--item',      // selector for item
  columnSelector: '.grid--column',  // selector for column
  resizable: true,                  // re-draw layout if window resize
}

const gridify = new Gridify(defaultOptions);

Events

Add handler on a container element

Event Parameters Description
gridify:init $event Dispatched after plugin init
gridify:resized $event Dispatched after grid resized

Usage example:

const container = document.querySelector('.grid');

container.addEventListener('gridify:init', (ev) => {
  console.log('Init handler');
}, false);

container.addEventListener('gridify:resized', (ev) => {
  console.log('Resized handler');
}, false);

Download Details:

Author: krybinski

GitHub: https://github.com/krybinski/gridify

javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

From imperative to declarative JavaScript

In this post, I will explain why declarative code is better than imperative code. Then I will list some techniques to convert imperative JavaScript to a declarative one in common situations.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.