Fallwall.js
This is a jQuery plugin to make Fall Styles like Pinterest.
Installation
Just clone or download the zip of this repository
or via npm
$ yarn add fallwall # $ npm install --save fallwall
Setup
<!-- jQuery --><!-- fallwall.js or .min.js -->
or
// import in your .js file;
How to
First, you need to prepare a HTML template. Later Fallwall.js uses it to build content.
Example:
fallwall_#1 fallwall_#2
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
.
<!-- column --> <!-- grid --> fallwall_#1 fallwall_#2 <!-- grid --> fallwall_#1 fallwall_#2 <!-- column --> <!-- grid --> fallwall_#1 fallwall_#2
fallwall_#N
Replace 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:
Eddie Wen Hi~ I'm Eddie. Jason Liu Hi~ I'm Jason. Steve Wang Hi~ I'm Steve.
Functions
fallwall()
fallwall( template, dataArray, options, callback ){}
Example:
;
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:
;
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:
;