/** * Easily Browser through heirarchical list of taxonomies * @lastModified 8 August 2013 12:19AM * @author [email protected] * @url http://github.com/PebbleRoad/jquery-layout-balancer */; (function($) { 'use strict'; $.layoutBalancer = function(el, options) { var base = this; base.$el = $(el); base.el = el; base.options = $.extend({}, $.layoutBalancer.defaultOptions, options, base.$el.data()); base.$el.data('layoutBalancer', base); base.$el.child = base.$el.children(); base.init = function() { this.orphans = base.$el.child.length % base.options.columns; base.$el.child.slice(0, this.orphans) .addClass('orphan-column-' + this.orphans); }; base.init(); base.destroy = function() { base.$el.child.removeClass(function(i, klass) { return (klass.match(/\orphan-\S+/g) || []).join(' '); }); }; }; $.layoutBalancer.defaultOptions = { columns: 3 }; $.fn.layoutBalancer = function(options) { return this.each(function() { (new $.layoutBalancer(this, options)); }); }; $.fn.getlayoutBalancer = function() { this.data('layoutBalancer'); }; $.fn.destroylayoutBalancer = function() { this.each(function() { $(this).data('layoutBalancer').destroy(); }) }; })(jQuery, undefined); $(document).ready(function(){ $('.balancer').layoutBalancer({ columns: 3 /* Number of columns in the gallery */ }); });
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color:#888; } h1, h2, h3, h4, h5, h6, p { margin: 0 0 1em 0; } h2{ background:#eee; padding:10px 25px; margin:10px 0; } /** * Container */ .container { width: 960px; margin: 1em auto; } img { max-width: 100%; } /** * Grids */ .grids { list-style: none; padding: 1em 0 2em 0; margin: 0; overflow: hidden; } .grids li { float: left; width: 33.33333%; padding: 1em; border: 1px #eee solid; } .grids[data-columns="4"] li { width: 25%; } .grids .orphan-column-1, .grids[data-columns] .orphan-column-1 { width: 100%; } .grids .orphan-column-2, .grids[data-columns] .orphan-column-2 { width: 50%; } .grids .orphan-column-3, .grids[data-columns] .orphan-column-3 { width: 33.33333%; } /** * Orphan 1 */ /** Media Query */ @media only screen and (max-width: 600px) { .container { width: auto; } .grids > li { float: none; width: auto; } }
<h2>リスト5個</h2> <ul class="grids balancer"> <li> <h4>リスト1</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト2</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト3</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト4</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト5</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </ul> <h2>リスト5個 layout-balancer不使用</h2> <ul class="grids"> <li> <h4>リスト1</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト2</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト3</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト4</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト5</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </ul> <h2>リスト4個</h2> <ul class="grids balancer"> <li> <h4>リスト1</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト2</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト3</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト4</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </ul> <h2>リスト6個</h2> <ul class="grids balancer"> <li> <h4>リスト1</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト2</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト3</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト4</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </li> <li> <h4>リスト5</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト6</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </ul> <h2>リスト7個</h2> <ul class="grids balancer"> <li> <h4>リスト1</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト2</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト3</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト4</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> </li> <li> <h4>リスト5</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト6</h4> <p><img src="http://placehold.it/960x411" alt=""></p> <p>テキストテキストテキスト</p> </li> <li> <h4>リスト7</h4> <p><img src="http://placehold.it/350x150" alt=""></p> <p>テキストテキストテキスト</p> </li> </ul>