Saetl.net

Simple And Easy TempLate

Blocksit.jsの使い方

  1. 下記ページの 「Download」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/blocksit.css" />
    </head>
    

    サンプルのcssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    	font-family: Arial;
    }
    #container {
    	position: relative;
    	width: 1100px;
    	margin: 20px auto;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからblocksit.jsの設定*/
    .grid {
    	width: 188px;
    	min-height: 100px;
    	padding: 15px;
    	background: #fff;
    	margin: 8px;
    	font-size: 12px;
    	float: left;
    	box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    	-webkit-transition: top 1s ease, left 1s ease;
    	-moz-transition: top 1s ease, left 1s ease;
    	-o-transition: top 1s ease, left 1s ease;
    	-ms-transition: top 1s ease, left 1s ease;
    }
    .grid strong {
    	border-bottom: 1px solid #ccc;
    	margin: 10px 0;
    	display: block;
    	padding: 0 0 5px;
    	font-size: 17px;
    }
    .grid .meta {
    	text-align: right;
    	color: #777;
    	font-style: italic;
    }
    .grid .imgholder img {
    	max-width: 100%;
    	background: #ccc;
    	display: block;
    }
    
    @media screen and (max-width : 1240px) {
    body {
    	overflow: auto;
    }
    }
    
    @media screen and (max-width : 900px) {
    #backlinks {
    	float: none;
    	clear: both;
    }
    #backlinks a {
    	display: inline-block;
    	padding-right: 20px;
    }
    #wrapper {
    	margin-top: 90px;
    }
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/blocksit.min.js"></script>
    <!--javascript追記-->
    <script>
    $(document).ready(function() {
        //blocksit define
        $(window).load(function() {
            $('#container').BlocksIt({
                numOfCol: 5,
                offsetX: 8,
                offsetY: 8
            });
        });
        //window resize
        var currentWidth = 1100;
        $(window).resize(function() {
            var winWidth = $(window).width();
            var conWidth;
            if (winWidth < 660) {
                conWidth = 440;
                col = 2
            } else if (winWidth < 880) {
                conWidth = 660;
                col = 3
            } else if (winWidth < 1100) {
                conWidth = 880;
                col = 4;
            } else {
                conWidth = 1100;
                col = 5;
            }
            if (conWidth != currentWidth) {
                currentWidth = conWidth;
                $('#container').width(conWidth);
                $('#container').BlocksIt({
                    numOfCol: col,
                    offsetX: 8,
                    offsetY: 8
                });
            }
        });
    });
    </script>
    
    ・<body></body>内にコードを記述
    <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" /> </div>
        <strong>Sunset Lake</strong>
        <p>A peaceful sunset view...</p>
        <div class="meta">by j osborn</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" /> </div>
        <strong>Bridge to Heaven</strong>
        <p>Where is the bridge lead to?</p>
        <div class="meta">by SigitEko</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" /> </div>
        <strong>Autumn</strong>
        <p>The fall of the tree...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" /> </div>
        <strong>Winter Whisper</strong>
        <p>Winter feel...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" /> </div>
        <strong>Light</strong>
        <p>The only shinning light...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" /> </div>
        <strong>Rooster's Ranch</strong>
        <p>Rooster's ranch landscape...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" /> </div>
        <strong>Autumn Light</strong>
        <p>Sun shinning into forest...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" /> </div>
        <strong>Yellow cloudy</strong>
        <p>It is yellow cloudy...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" /> </div>
        <strong>Herringfleet Mill</strong>
        <p>Just a herringfleet mill...</p>
        <div class="meta">by Ian Flindt</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" /> </div>
        <strong>Battle Field</strong>
        <p>Battle Field for you...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" /> </div>
        <strong>Sundays Sunset</strong>
        <p>Beach view sunset...</p>
        <div class="meta">by Robert Strachan</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" /> </div>
        <strong>Sun Flower</strong>
        <p>Good Morning Sun flower...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" /> </div>
        <strong>Beach</strong>
        <p>Something on beach...</p>
        <div class="meta">by unknown</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" /> </div>
        <strong>Flowers</strong>
        <p>Hello flowers...</p>
        <div class="meta">by R A Stanley</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" /> </div>
        <strong>Alone</strong>
        <p>Lonely plant...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>blocksit.js</title>
    <link rel="stylesheet" type="text/css" href="css/blocksit.css">
    </head>
    
    <body>
    <div id="container">
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" /> </div>
        <strong>Sunset Lake</strong>
        <p>A peaceful sunset view...</p>
        <div class="meta">by j osborn</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" /> </div>
        <strong>Bridge to Heaven</strong>
        <p>Where is the bridge lead to?</p>
        <div class="meta">by SigitEko</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" /> </div>
        <strong>Autumn</strong>
        <p>The fall of the tree...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" /> </div>
        <strong>Winter Whisper</strong>
        <p>Winter feel...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" /> </div>
        <strong>Light</strong>
        <p>The only shinning light...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" /> </div>
        <strong>Rooster's Ranch</strong>
        <p>Rooster's ranch landscape...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" /> </div>
        <strong>Autumn Light</strong>
        <p>Sun shinning into forest...</p>
        <div class="meta">by Lars van de Goor</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" /> </div>
        <strong>Yellow cloudy</strong>
        <p>It is yellow cloudy...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" /> </div>
        <strong>Herringfleet Mill</strong>
        <p>Just a herringfleet mill...</p>
        <div class="meta">by Ian Flindt</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" /> </div>
        <strong>Battle Field</strong>
        <p>Battle Field for you...</p>
        <div class="meta">by Andrea Andrade</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" /> </div>
        <strong>Sundays Sunset</strong>
        <p>Beach view sunset...</p>
        <div class="meta">by Robert Strachan</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" /> </div>
        <strong>Sun Flower</strong>
        <p>Good Morning Sun flower...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" /> </div>
        <strong>Beach</strong>
        <p>Something on beach...</p>
        <div class="meta">by unknown</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" /> </div>
        <strong>Flowers</strong>
        <p>Hello flowers...</p>
        <div class="meta">by R A Stanley</div>
      </div>
      <div class="grid">
        <div class="imgholder"> <img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" /> </div>
        <strong>Alone</strong>
        <p>Lonely plant...</p>
        <div class="meta">by Zsolt Zsigmond</div>
      </div>
    </div>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/blocksit.min.js"></script>
    <script>
    $(document).ready(function() {
        //blocksit define
        $(window).load(function() {
            $('#container').BlocksIt({
                numOfCol: 5,
                offsetX: 8,
                offsetY: 8
            });
        });
        //window resize
        var currentWidth = 1100;
        $(window).resize(function() {
            var winWidth = $(window).width();
            var conWidth;
            if (winWidth < 660) {
                conWidth = 440;
                col = 2
            } else if (winWidth < 880) {
                conWidth = 660;
                col = 3
            } else if (winWidth < 1100) {
                conWidth = 880;
                col = 4;
            } else {
                conWidth = 1100;
                col = 5;
            }
            if (conWidth != currentWidth) {
                currentWidth = conWidth;
                $('#container').width(conWidth);
                $('#container').BlocksIt({
                    numOfCol: col,
                    offsetX: 8,
                    offsetY: 8
                });
            }
        });
    });
    </script>
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル