Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
3.8 KiB

---
title: masonry corner stamp
layout: default
category: tests
---
<style>
.corner-stamp {
width: 280px;
height: 340px;
padding: 10px;
margin: 10px;
float: right;
background: red;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>
<section id="copy">
<p>Modified masonry layout mode methods for corner stamp. This is a branch of Masonry. See <a href="http://jsfiddle.net/desandro/M8EYn/embedded/result/">Masonry corner stamp demo</a>.</p>
<p>Set <code>cornerStampSelector</code> within <code>masonry</code> options. <code>itemSelector</code> needs to be set as well.</p>
{% highlight javascript %}
$('#container').isotope({
itemSelector: '.item',
masonry: {
columnWidth: 120,
cornerStampSelector: '.corner-stamp'
}
});
{% endhighlight %}
</section>
<section id="options" class="clearfix">
{% include filter-buttons.html %}
{% include sort-buttons.html %}
<h3>Etc</h3>
<ul id="etc" class="clearfix">
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
<li id="insert"><a href="#insert">Insert new elements</a></li>
<li id="append"><a href='#append'>Append new elements</a></li>
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
</ul>
</section> <!-- #options -->
<div id="container" class="clickable clearfix">
<div class="corner-stamp">corner stamp here.</div>
{% for elem_number in site.best_of_order %}
{% assign element = site.elements[elem_number] %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #container -->
<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script src="../js/fake-element.js"></script>
<script>
$.Isotope.prototype._masonryResizeChanged = function() {
return true;
};
$.Isotope.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
this._getSegments();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push( 0 );
}
if ( this.options.masonry.cornerStampSelector ) {
var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ),
stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ),
cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ),
cornerStampHeight = $cornerStamp.outerHeight(true);
for ( i = Math.max( this.masonry.cols - cornerCols, cornerCols ); i < this.masonry.cols; i++ ) {
this.masonry.colYs[i] = cornerStampHeight;
}
}
};
$(function(){
var $container = $('#container');
{% include random-sizes.js %}
$container.isotope({
itemSelector : '.element',
masonry : {
columnWidth : 120,
cornerStampSelector: '.corner-stamp'
},
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
category : function( $elem ) {
return $elem.attr('data-category');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
weight : function( $elem ) {
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
{% include option-set-buttons.js %}
{% include add-buttons.js %}
{% include change-sizes.js %}
var $sortBy = $('#sort-by');
$('#shuffle a').click(function(){
$container.isotope('shuffle');
$sortBy.find('.selected').removeClass('selected');
$sortBy.find('[data-option-value="random"]').addClass('selected');
return false;
});
});
</script>