playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add masonry horizontal stamps

pull/563/head
David DeSandro 12 years ago
parent
fb81a14bd1
commit
4917107b7d
2 changed files with 29 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      examples/masonry-horizontal.html
  2. 8
      layout-modes/masonry-horizontal.js

26
examples/masonry-horizontal.html
Unescape View File

@ -20,6 +20,27 @@
.element.lanthanoid { height: 190px; } .element.lanthanoid { height: 190px; }
.element.actinoid { width: 170px; } .element.actinoid { width: 170px; }
.element.transition { width: 220px; } .element.transition { width: 220px; }
.stamp {
background: #DDD;
border: 2px dotted;
position: absolute;
}
.stamp1 {
height: 30%;
width: 80px;
left: 30px;
top: 10%;
}
.stamp2 {
height: 200px;
width: 40px;
left: 15px;
top: 100px;
}
</style> </style>
</head> </head>
<body> <body>
@ -45,6 +66,9 @@
</div> </div>
<div id="container"> <div id="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="element transition metal " data-symbol="Hg" data-category="transition"> <div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p> <p class="number">80</p>
@ -175,7 +199,7 @@ docReady( function() {
var container = document.querySelector('#container'); var container = document.querySelector('#container');
var iso = window.iso = new Isotope( container, { var iso = window.iso = new Isotope( container, {
itemSelector: '.element', itemSelector: '.element',
// stamp: '.stamp', stamp: '.stamp',
layoutMode: 'masonryHorizontal', layoutMode: 'masonryHorizontal',
transitionDuration: '0.8s', transitionDuration: '0.8s',
masonryHorizontal: { masonryHorizontal: {

8
layout-modes/masonry-horizontal.js
Unescape View File

@ -95,16 +95,16 @@ function masonryHorizontalDefinition( getSize, layoutMode ) {
MasonryHorizontal.prototype._manageStamp = function( stamp ) { MasonryHorizontal.prototype._manageStamp = function( stamp ) {
var stampSize = getSize( stamp ); var stampSize = getSize( stamp );
var offset = this._getElementOffset( stamp ); var offset = this.isotope._getElementOffset( stamp );
// get the rows that this stamp affects // get the rows that this stamp affects
var firstY = this.options.isOriginTop ? offset.top : offset.bottom; var firstY = this.isotope.options.isOriginTop ? offset.top : offset.bottom;
var lastY = firstY + stampSize.outerHeight; var lastY = firstY + stampSize.outerHeight;
var firstRow = Math.floor( firstY / this.rowHeight ); var firstRow = Math.floor( firstY / this.rowHeight );
firstRow = Math.max( 0, firstRow ); firstRow = Math.max( 0, firstRow );
var lastRow = Math.floor( lastY / this.rowHeight ); var lastRow = Math.floor( lastY / this.rowHeight );
lastRow = Math.min( this.rows - 1, lastRow ); lastRow = Math.min( this.rows - 1, lastRow );
// set rowXs to bottom of the stamp // set rowXs to outside edge of the stamp
var stampMaxX = ( this.options.isOriginLeft ? offset.left : offset.right ) + var stampMaxX = ( this.isotope.options.isOriginLeft ? offset.left : offset.right ) +
stampSize.outerWidth; stampSize.outerWidth;
for ( var i = firstRow; i <= lastRow; i++ ) { for ( var i = firstRow; i <= lastRow; i++ ) {
this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] ); this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] );

Write Preview
Loading…
Cancel
Save