add masonry horizontal stamps

12 years ago · 4917107b7d
2 changed files with 29 additions and 5 deletions
--- a/examples/masonry-horizontal.html
+++ b/examples/masonry-horizontal.html
@ -20,6 +20,27 @@
  .element.lanthanoid      { height: 190px; }
  .element.actinoid        { width: 170px; }
  .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>
 </head>
 <body>
@ -45,6 +66,9 @@
 </div>

 <div id="container">
+  <div class="stamp stamp1"></div>
+  <div class="stamp stamp2"></div>
+

  <div class="element transition metal   " data-symbol="Hg" data-category="transition">
    <p class="number">80</p>
@ -175,7 +199,7 @@ docReady( function() {
  var container = document.querySelector('#container');
  var iso = window.iso = new Isotope( container, {
    itemSelector: '.element',
-    // stamp: '.stamp',
+    stamp: '.stamp',
    layoutMode: 'masonryHorizontal',
    transitionDuration: '0.8s',
    masonryHorizontal: {
--- a/layout-modes/masonry-horizontal.js
+++ b/layout-modes/masonry-horizontal.js
@ -95,16 +95,16 @@ function masonryHorizontalDefinition( getSize, layoutMode ) {

  MasonryHorizontal.prototype._manageStamp = function( stamp ) {
    var stampSize = getSize( stamp );
-    var offset = this._getElementOffset( stamp );
+    var offset = this.isotope._getElementOffset( stamp );
    // 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 firstRow = Math.floor( firstY / this.rowHeight );
    firstRow = Math.max( 0, firstRow );
    var lastRow = Math.floor( lastY / this.rowHeight );
    lastRow = Math.min( this.rows - 1, lastRow );
-    // set rowXs to bottom of the stamp
-    var stampMaxX = ( this.options.isOriginLeft ? offset.left : offset.right ) +
+    // set rowXs to outside edge of the stamp
+    var stampMaxX = ( this.isotope.options.isOriginLeft ? offset.left : offset.right ) +
      stampSize.outerWidth;
    for ( var i = firstRow; i <= lastRow; i++ ) {
      this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] );