1 ---

     2 title: Masonry gutters

     3 layout: default

     4 category: custom-layout-modes

     5 ---

     6 

     7 <style>

     8 .element {

     9   margin: 5px 0;

    10 }

    11 

    12 #container {

    13   padding: 5px 0;

    14 }

    15 </style>

    16 

    17 <section id="copy">

    18   <p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p>

    19   <p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p>

    20 

    21 {% highlight javascript %}

    22 

    23 $('#container').isotope({

    24   masonry: {

    25     columnWidth: 110,

    26     gutterWidth: 10

    27   }

    28 });

    29 

    30 {% endhighlight %}

    31 

    32 </section>

    33 

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

    35 

    36   {% include filter-buttons.html %}

    37 

    38   {% include sort-buttons.html %}

    39 

    40   <h3>Etc</h3>

    41 

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

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

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

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

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

    47   </ul>

    48 

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

    50 

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

    52   {% for elem_number in site.best_of_order %}

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

    54     {% include element-partial.html %}

    55   {% endfor %}

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

    57 

    58 

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

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

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

    62 <script>

    63 

    64   // modified Isotope methods for gutters in masonry

    65   $.Isotope.prototype._getMasonryGutterColumns = function() {

    66     var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;

    67         containerWidth = this.element.width();

    68   

    69     this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||

    70                   // or use the size of the first item

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

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

    73                   containerWidth;

    74 

    75     this.masonry.columnWidth += gutter;

    76 

    77     this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );

    78     this.masonry.cols = Math.max( this.masonry.cols, 1 );

    79   };

    80 

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

    82     // layout-specific props

    83     this.masonry = {};

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

    85     this._getMasonryGutterColumns();

    86     var i = this.masonry.cols;

    87     this.masonry.colYs = [];

    88     while (i--) {

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

    90     }

    91   };

    92 

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

    94     var prevSegments = this.masonry.cols;

    95     // update cols/rows

    96     this._getMasonryGutterColumns();

    97     // return if updated cols/rows is not equal to previous

    98     return ( this.masonry.cols !== prevSegments );

    99   };

   100 

   101 

   102   $(function(){

   103     

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

   105     

   106     {% include random-sizes.js %}

   107     

   108     $container.isotope({

   109       itemSelector : '.element',

   110       masonry : {

   111         columnWidth : 110,

   112         gutterWidth : 10

   113       },

   114       getSortData : {

   115         symbol : function( $elem ) {

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

   117         },

   118         category : function( $elem ) {

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

   120         },

   121         number : function( $elem ) {

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

   123         },

   124         weight : function( $elem ) {

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

   126         },

   127         name : function ( $elem ) {

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

   129         }

   130       }

   131     });

   132       

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

   134 

   135     {% include add-buttons.js %}

   136 

   137     {% include change-sizes.js %}

   138 

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

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

   141       $container.isotope('shuffle');

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

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

   144       return false;

   145     });

   146     

   147   });

   148 </script>