jQuery

【jQuery】Pinterestのようなスタイルを構築。Fallwall

October 9, 2016
Fallwall

FallwallはPinterestのようなスタイルを作るjQueryプラグイン。

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';

HTML

Example

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

Functions

fallwall_init()
Example

$('#element').fallwall_init( $('.template').html(), fallwall_data, {
    gridNumber: 4,
    columnNumber: 3,
    defaultClass: 'animated zoomIn'
}, function() {
    alert('Init is finished');
});

loadMoreFw()
Example

$('#element').loadMoreFw( function() {
    console.log('LOAD');
});

addFwGrid()
Example

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