オブジェクトをきれいに整列させてくれるjQueryプラグイン

オブジェクトをきれいに整列させてくれるjQueryプラグイン「jquery.nested.js」を使ってみた。

レスポンシブにも対応している。

設置方法
■HTML

XHTML

<h1>Sample</h1> <div id="container"> </div>

1
2
3

<h1>Sample</h1>
<div id="container">
</div>

■CSS

CSS

body { padding:1px; margin:0px; } .box { background-color:#9acd32; -moz-border-radius:3px; -khtml-border-radius: 3px; -webkit-border-radius:3px; border-radius:3px; } .size21, .size22, .size23, .twocols { background: #ccc } .size31, .size32, .size33, .threecols { background: #b28835 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body
{
padding:1px;
margin:0px;
}
.box
{
background-color:#9acd32;
-moz-border-radius:3px;
-khtml-border-radius: 3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.size21, .size22, .size23, .twocols { background: #ccc }
.size31, .size32, .size33, .threecols { background: #b28835 }

■js

JavaScript

// メイン $(function() { for ( var i = 0; i < 300; i++ ) { var e = '<div class="box size' + Math.ceil( Math.random() * 3 ) + Math.ceil( Math.random() * 3 ) + '"></div>'; $( '#container' ).html( e + $( '#container' ).html() ); } $('#container').nested( {minWidth: 25, speed: 10} ); setTimeout( 'timer()', 10000 ); }); // 5秒ごとにアイテムを追加 function timer() { var boxes = []; for (var i=0; i < 20; i++ ) { var box = document.createElement( 'div' ); box.className = 'box size' + Math.ceil( Math.random() * 3 ) + Math.ceil( Math.random() * 3 ); boxes.push( box ); } $( '#container' ).prepend( boxes ).nested( 'prepend', boxes ); setTimeout( 'timer()', 5000 ); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// メイン
$(function()
{
for ( var i = 0; i < 300; i++ )
{
var e = '<div class="box size' + Math.ceil( Math.random() * 3 ) +  Math.ceil( Math.random() * 3 ) + '"></div>';
$( '#container' ).html(  e + $( '#container' ).html() );
}

$('#container').nested( {minWidth: 25, speed: 10} );

setTimeout( 'timer()', 10000 );
});

// 5秒ごとにアイテムを追加
function timer()
{
var boxes = [];
for (var i=0; i < 20; i++ )
{
var box = document.createElement( 'div' );
box.className = 'box size' +  Math.ceil( Math.random() * 3 ) +  Math.ceil( Math.random() * 3 );
boxes.push( box );
}

$( '#container' ).prepend( boxes ).nested( 'prepend', boxes );
setTimeout( 'timer()', 5000 );
}

パラメータ	データ型	デフォルト	用途	使用方法
minWidth	int	50	アイテムの横幅	アイテムの最小横幅をpxで指定
minColumn	int	1	カラム数	最小カラム数を指定
gutter	int	1	アイテム間の隙間	アイテム同士の隙間をpxで指定
animate	bool	FALSE	アニメーション	アニメーションの有無を指定
animationOptions.speed	int	20	スピード	スピードをミリ秒で指定
animationOptions.duration	int	100	デュレーション	デュレーションをミリ秒で指定
animationOptions.queue	bool	TRUE	キュー	アイテムをスライドインさせるかどうか
animationOptions.complete	function	–	完了時の関数	完了時呼び出される関数

WRITER

hoshino

ECのことを中心に書きたいと思います。ネタが無いときはプログラムやデザインのことも書きます。