https://github.com/eddiewentw/fallwall.js
jQuery plugin: build Fall Styles like Pinterest
https://github.com/eddiewentw/fallwall.js
fall-styles javascript jquery pinterest plugin
Last synced: 3 months ago
JSON representation
jQuery plugin: build Fall Styles like Pinterest
- Host: GitHub
- URL: https://github.com/eddiewentw/fallwall.js
- Owner: eddiewentw
- License: mit
- Created: 2015-01-12T00:53:57.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2022-05-16T16:52:50.000Z (over 3 years ago)
- Last Synced: 2025-09-18T01:39:22.680Z (3 months ago)
- Topics: fall-styles, javascript, jquery, pinterest, plugin
- Language: JavaScript
- Homepage:
- Size: 482 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Fallwall.js
[](https://badge.fury.io/js/fallwall)
This is a jQuery plugin to make Fall Styles like Pinterest.
[Fallwall DEMO](http://github.eddiewen.me/Fallwall.js/)
----
### Installation
Just clone or download the zip of this repository
or via [npm](https://www.npmjs.com/package/fallwall)
~~~bash
$ yarn add fallwall
# $ npm install --save fallwall
~~~
### Setup
~~~html
~~~
or
~~~javascript
// 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:
~~~html
fallwall_#1
fallwall_#2
~~~
*fallwall\_#1, fallwall\_#2... fallwall\_#n will be replaced with your data.*
Your each content will be wrapped in `
`, and they are wrapped in ``, all of these are in your element.
You could control them with classname `fw_column` & `fw_grid`.
~~~html
fallwall_#1
fallwall_#2
fallwall_#1
fallwall_#2
fallwall_#1
fallwall_#2
~~~
### Replace `fallwall_#N`
Prepare your data like this array:
~~~javascript
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:
~~~html
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：
~~~javascript
$('#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](http://github.eddiewen.me/Fallwall.js/) page. That's [Animate.css](http://daneden.github.io/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：
~~~javascript
$('#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：
~~~javascript
$('#element').addFwGrid({
0: 'Mandy Chen',
1: 'Hi~ I\'m Mandy.',
2: 'class_new',
}, () => {
console.log('ADD');
});
~~~