PHP & JavaScript Room :: 設置サンプル

実行結果

Smart Columns with CSS & jQuery | 設置サンプル

▼ウィンドウをリサイズすると、ウィンドウサイズにぴったりフィットするようにカラムが整列します。

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>Smart Columns with CSS &amp; jQuery | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script type="text/javascript">
         function smartColumns() { //Create a function that calculates the smart columns
            //Reset column size to a 100% once view port has been adjusted
            $("ul.column").css({ 'width' : "100%"});
            var colWrap = $("ul.column").width(); //Get the width of row
            var colNum = Math.floor(colWrap / 240); //Find how many columns of 240px can fit per row / then round it down to a whole number
            var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column
            $("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
            $("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column   
         }
         $(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
            smartColumns();
         });
         $(function(){
            smartColumns();
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         ul.column{
            width: 100%;
            padding: 0;
            margin: 10px 0;
            list-style: none;
         }
         ul.column li {
            float: left;
            width: 240px; /*Set default width*/
            padding: 0;
            margin: 5px 0;
            display: inline;
         }
         .block {
            height: 355px;
            font-size: 1em;
            margin-right: 10px; /*Creates the 10px gap between each column*/
            padding: 20px;
            background: #e3e1d5;
         }
         .block h3 {
            margin:0 0 10px 0; padding:0;
            font-size: 1.1em;
         }
         .block img {
                 /*Flexible image size with border*/
            width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
            padding: 5%;
            background:#fff;
            margin: 0 auto;
            display: block;
            -ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
         }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/'>Smart Columns with CSS &amp; jQuery</a> | 設置サンプル</h1>
         <p>▼ウィンドウをリサイズすると、ウィンドウサイズにぴったりフィットするようにカラムが整列します。</p>
<!-- CODE -->
         <div class="cf">
            <ul class="column">
                 <!--Repeating list item-->
                 <li>
                     <div class="block">
                     <h3>アボカド シーザーサラダ@アボガドダイニング Platinum Lounge</h3>
                         <p><a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a></p>
                     <p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                     <h3>アボカド刺@アボガドダイニング Platinum Lounge</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a></p>
                     <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                         <h3>ハニートースト@アボガドダイニング Platinum Lounge</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" width="240" height="180" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a></p>
                     <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                         <h3>ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" width="240" height="180" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a></p>
                     <p>めちゃくちゃおいしかったアボカドのピザ！ピザ生地はクリスピータイプでさくさく！</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                     <h3>フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3273696401/" title="フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" width="240" height="180" alt="フライドポテト アボカドディップ添え@アボガドダイニング Platinum Lounge" /></a></p>
                         <p>アボカドディップはとってもクリーミー！ポテトじゃなくてもなんにでも合いそう♪</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                         <h3>ダークチェリーモカ@STARBUCKS</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3055162547/" title="ダークチェリーモカ@STARBUCKS by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" width="240" height="180" alt="ダークチェリーモカ@STARBUCKS" /></a></p>
                     <p>ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね！</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                         <h3>バニラミルクフラペチーノ@STARBUCKS</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/3104684709/" title="バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" width="240" height="180" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></p>
                     <p>牛乳ヒゲできそうですよねｗ</p>
                     </div>
                 </li>
                 <li>
                     <div class="block">
                         <h3>メロンソーダとカフェオレ@CAFE EAT代官山</h3>
                     <p><a href="http://www.flickr.com/photos/22559849@N06/2973352946/" title="メロンソーダとカフェオレ@CAFE EAT代官山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" width="240" height="180" alt="メロンソーダとカフェオレ@CAFE EAT代官山" /></a></p>
                     <p>代官山アドレスにあるCafe eat。メロンソーダーとアイス・カフェオーレ！ドリンクが大きくて長居にはもってこい♪</p>
                     </div>
                 </li>
                <!--end repeating list item-->
            </ul>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>