Fallwall.js : jQuery Fall Styles like Pinterest

Fallwall.js

This is a jQuery plugin to make Fall Styles like Pinterest.

Fallwall DEMO

Installation

Just clone or download the zip of this repository
or via npm

$ yarn add fallwall  # $ npm install --save fallwall

Setup

<!-- jQuery --> <script src='jquery.min.js'></script> <!-- fallwall.js or .min.js --> <script src='path/to/fallwall.js'></script>

or

// import in your .js file import 'fallwall';

How to

First, you need to prepare a HTML template. Later Fallwall.js uses it to build content.

Example:

<div class='template'> 	<h4 class='fallwall_#3'>fallwall_#1</h4> 	<div class='intro'>fallwall_#2</div> </div>

fallwall_#1, fallwall_#2... fallwall_#n will be replaced with your data.

Your each content will be wrapped in <div class='fw_grid'></div>, and they are wrapped in <div class='fw_column'></div>, all of these are in your element.
You could control them with classname fw_column & fw_grid.

<div id='element'> 	<!-- column --> 	<div class='fw_column'> 		<!-- grid --> 		<div class='fw_grid'> 			<h4 class='fallwall_#3'>fallwall_#1</h4> 			<div class='intro'>fallwall_#2</div> 		</div> 		<!-- grid --> 		<div class='fw_grid'> 			<h4 class='fallwall_#3'>fallwall_#1</h4> 			<div class='intro'>fallwall_#2</div> 		</div> 	</div> 	<!-- column --> 	<div class='fw_column'> 		<!-- grid --> 		<div class='fw_grid'> 			<h4 class='fallwall_#3'>fallwall_#1</h4> 			<div class='intro'>fallwall_#2</div> 		</div> 	</div> </div>

Replace fallwall_#N

Prepare your data like this array:

var fallwall_data = [ 	{ 0: 'Eddie Wen',  1: 'Hi~ I\'m Eddie.', 2: 'class_Wen'  }, 	{ 0: 'Jason Liu',  1: 'Hi~ I\'m Jason.', 2: 'class_Liu'  }, 	{ 0: 'Steve Wang', 1: 'Hi~ I\'m Steve.', 2: 'class_Wang' }, ];

fallwall_data[n][0] will replace fallwall_#1 in template, fallwall_data[n][1] will replace fallwall_#2....

In this case, you will get this output:

<div class='fw_grid'> 	<h4 class='class_Wen'>Eddie Wen</h4> 	<div class='intro'>Hi~ I'm Eddie.</div> </div> <div class='fw_grid'> 	<h4 class='class_Liu'>Jason Liu</h4> 	<div class='intro'>Hi~ I'm Jason.</div> </div> <div class='fw_grid'> 	<h4 class='class_Wang'>Steve Wang</h4> 	<div class='intro'>Hi~ I'm Steve.</div> </div>

Functions

fallwall()

fallwall( template, dataArray, options, callback ){}

Example：

$('#element').fallwall( $('.template').html(), fallwall_data, { 	gridNumber: 4, 	columnNumber: 3, 	defaultClass: 'animated zoomIn', }, () => { 	console.log('Init is finished'); });

Options

• gridNumber: Int
  How many grids do you want to generate everytime
• columnNumber: Int
  Number of column in your element
• defaultClass: String
  Default class you want be add on the grid.

My default class is 'animated zoomIn' in the DEMO page. That's Animate.css's class. You could use this way to create animation.

loadMoreFw()

loadMoreFw( callback ){}

This will append more data grid at the bottom. You might like to call this function when user scroll down.

This function will return a String, NO_MORE_DATA or FINISHED. The latter means this run is finished, the former means the data is exhausted.

Example：

$('#element').loadMoreFw(() => { 	console.log('LOADED'); });

addFwGrid()

addFwGrid( data, callback ){}

Directly append a new grid at the top.
But you have to give a new data in Object, it doesn't use the old data you gave.

Example：

$('#element').addFwGrid({ 	0: 'Mandy Chen', 	1: 'Hi~ I\'m Mandy.', 	2: 'class_new', }, () => { 	console.log('ADD'); });