まずは周辺調査

<a href="http://photoshopvip.net/archives/40476">動きのあるグリッドレイアウトWebデザイン40個 + 無料プラグイン6個まとめ - Photoshop VIP</a>

動きのあるグリッドレイアウトWebデザイン40個 + 無料プラグイン6個まとめ - Photoshop VIP

今回もPhotoshopvip様のお世話になります。

Grid-A-Licious

以前より気になっていたこちらを使うことに

Grid-A-Licious

f:id:hope_is_dream:20141008192717p:plain

こいつをbootstrapと組み合わせて初心者なりに作って行きます。

実装してみよう

jsを読み込む。jqueryと一緒に読み込みます。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.grid-a-licious.min.js"></script>

適当なところにdiv要素を追加

<!-- main -->
<div id="grid-a-1">
    <div class="grid-a-item color-w">パネル</div>
    <div class="grid-a-item color-w">パネル</div>
    <div class="grid-a-item color-w">パネル</div>
    <div class="grid-a-item color-w">パネル</div>
</div>
<script>
    $("#grid-a-1").gridalicious({});
</script>

f:id:hope_is_dream:20141008194718p:plain

でん！

divにサイズを入れていないのか横に伸びてしまった。

どうもクラスが".item"でないといけないみたい。

<style type="text/css">
    .item{
        height: 200px;
    }
</style>

<!-- main -->
<div id="grid-a-1">
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
    <div class="item color-w">パネル</div>
</div>

<script>
    $("#grid-a-1").gridalicious({});
</script>

f:id:hope_is_dream:20141008195346p:plain

これでようやく出るようになった。

次は、画像を読み込むぞー

素材はSUIKO

<!-- main -->
<div id="grid-a-1">
    <?php 
    $dir_name = "./img/img-suiko/";
    $img_ary = scandir($dir_name);
    $file_name=array();
    
    // 画像ファイル以外を配列から削除;
    foreach ($img_ary as $key => $value) {
        $path=$dir_name.$value;
        if(@getimagesize($path)){
            $file_name[] = $value;
        }
    }

    for ($i=1; $i < count($file_name); $i++) { 
        # code...
        $thtml = '
        <div class="item color-w">
        <img src="./img/img-suiko/s-suiko-%1$03d.jpg">
        </div>
        ';
        $html = vsprintf($thtml, $i);
        echo $html;
    }
    ?>
</div>
<script>
$("#grid-a-1").gridalicious({
    gutter:0,
    animate: true
});
</script>

f:id:hope_is_dream:20141008204302p:plain