1 ---

     2 title: Centered Masonry

     3 layout: default

     4 category: custom-layout-modes

     5 ---

     6 

     7 <style>

     8   #container {

     9     margin: 0 auto 20px;

    10   }

    11 </style>

    12 

    13 <section id="copy">

    14   <p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for centered container.</p>

    15 </section>

    16 

    17 <section id="options" class="clearfix">

    18 

    19   {% include filter-buttons.html %}

    20 

    21   {% include sort-buttons.html %}

    22 

    23   <h3>Etc</h3>

    24 

    25   <ul id="etc" class="clearfix">

    26     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    27     <li id="insert"><a href="#insert">Insert new elements</a></li>

    28     <li id="append"><a href='#append'>Append new elements</a></li>

    29     <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>

    30   </ul>

    31 

    32 </section> <!-- #options -->

    33 

    34 <div id="container" class="clickable clearfix">

    35   {% for elem_number in site.best_of_order %}

    36     {% assign element = site.elements[elem_number] %}

    37     {% include element-partial.html %}

    38   {% endfor %}

    39 </div> <!-- #container -->

    40 

    41 

    42 <script src="../{{ site.jquery_js }}"></script>

    43 <script src="../{{ site.isotope_js }}"></script>

    44 <script src="../js/fake-element.js"></script>

    45 <script>

    46 

    47   $.Isotope.prototype._getCenteredMasonryColumns = function() {

    48     this.width = this.element.width();

    49     

    50     var parentWidth = this.element.parent().width();

    51     

    52                   // i.e. options.masonry && options.masonry.columnWidth

    53     var colW = this.options.masonry && this.options.masonry.columnWidth ||

    54                   // or use the size of the first item

    55                   this.$filteredAtoms.outerWidth(true) ||

    56                   // if there's no items, use size of container

    57                   parentWidth;

    58     

    59     var cols = Math.floor( parentWidth / colW );

    60     cols = Math.max( cols, 1 );

    61 

    62     // i.e. this.masonry.cols = ....

    63     this.masonry.cols = cols;

    64     // i.e. this.masonry.columnWidth = ...

    65     this.masonry.columnWidth = colW;

    66   };

    67   

    68   $.Isotope.prototype._masonryReset = function() {

    69     // layout-specific props

    70     this.masonry = {};

    71     // FIXME shouldn't have to call this again

    72     this._getCenteredMasonryColumns();

    73     var i = this.masonry.cols;

    74     this.masonry.colYs = [];

    75     while (i--) {

    76       this.masonry.colYs.push( 0 );

    77     }

    78   };

    79 

    80   $.Isotope.prototype._masonryResizeChanged = function() {

    81     var prevColCount = this.masonry.cols;

    82     // get updated colCount

    83     this._getCenteredMasonryColumns();

    84     return ( this.masonry.cols !== prevColCount );

    85   };

    86   

    87   $.Isotope.prototype._masonryGetContainerSize = function() {

    88     var unusedCols = 0,

    89         i = this.masonry.cols;

    90     // count unused columns

    91     while ( --i ) {

    92       if ( this.masonry.colYs[i] !== 0 ) {

    93         break;

    94       }

    95       unusedCols++;

    96     }

    97     

    98     return {

    99           height : Math.max.apply( Math, this.masonry.colYs ),

   100           // fit container to columns that have been used;

   101           width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth

   102         };

   103   };

   104 

   105 

   106   $(function(){

   107     

   108     var $container = $('#container');

   109     

   110     {% include random-sizes.js %}

   111     

   112     $container.isotope({

   113       itemSelector : '.element',

   114       masonry : {

   115         columnWidth : 120

   116       },

   117       getSortData : {

   118         symbol : function( $elem ) {

   119           return $elem.attr('data-symbol');

   120         },

   121         category : function( $elem ) {

   122           return $elem.attr('data-category');

   123         },

   124         number : function( $elem ) {

   125           return parseInt( $elem.find('.number').text(), 10 );

   126         },

   127         weight : function( $elem ) {

   128           return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

   129         },

   130         name : function ( $elem ) {

   131           return $elem.find('.name').text();

   132         }

   133       }

   134     });

   135       

   136     {% include option-set-buttons.js %}

   137 

   138     {% include add-buttons.js %}

   139 

   140     {% include change-sizes.js %}

   141 

   142     var $sortBy = $('#sort-by');

   143     $('#shuffle a').click(function(){

   144       $container.isotope('shuffle');

   145       $sortBy.find('.selected').removeClass('selected');

   146       $sortBy.find('[data-option-value="random"]').addClass('selected');

   147       return false;

   148     });

   149     

   150   });

   151 </script>