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

Add gutter option to fitRows; Fixes #580

pull/829/head
David DeSandro 11 years ago
parent
293c7c58cf
commit
38b0915598
5 changed files with 201 additions and 3 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. 7
      js/layout-modes/fit-rows.js
  2. 135
      sandbox/fitrows.html
  3. 43
      test/fit-rows.js
  4. 13
      test/index.html
  5. 6
      test/tests.css

7
js/layout-modes/fit-rows.js
Unescape View File

@ -10,13 +10,16 @@ FitRows.prototype._resetLayout = function() {
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.maxY = 0; this.maxY = 0;
this._getMeasurement( 'gutter', 'outerWidth' );
}; };
FitRows.prototype._getItemLayoutPosition = function( item ) { FitRows.prototype._getItemLayoutPosition = function( item ) {
item.getSize(); item.getSize();
var itemWidth = item.size.outerWidth + this.gutter;
// if this element cannot fit in the current row // if this element cannot fit in the current row
if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) { var containerWidth = this.isotope.size.innerWidth + this.gutter;
if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
this.x = 0; this.x = 0;
this.y = this.maxY; this.y = this.maxY;
} }
@ -27,7 +30,7 @@ FitRows.prototype._getItemLayoutPosition = function( item ) {
}; };
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
this.x += item.size.outerWidth; this.x += itemWidth;
return position; return position;
}; };

135
sandbox/fitrows.html
Unescape View File

@ -0,0 +1,135 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fitRows</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#gutter2 .gutter-sizer { width: 30px; }
</style>
</head>
<body>
<h1>fitRows</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="gutter1" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="gutter2" class="container">
<div class="gutter-sizer"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/item.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
docReady( function() {
var container = document.querySelector('#basic');
var iso = window.iso = new Isotope( container, {
layoutMode: 'fitRows'
});
// gutter with explicit value
new Isotope( '#gutter1', {
layoutMode: 'fitRows',
fitRows: {
gutter: 20
}
});
// gutter with element sizing
new Isotope( '#gutter2', {
itemSelector: '.item',
layoutMode: 'fitRows',
fitRows: {
gutter: '.gutter-sizer'
}
});
});
</script>
</body>
</html>

43
test/fit-rows.js
Unescape View File

@ -0,0 +1,43 @@
( function() {
'use strict';
test( 'fitRows', function() {
var iso = new Isotope( '#fitrows-gutter', {
layoutMode: 'fitRows',
itemSelector: '.item',
transitionDuration: 0
});
function checkPosition( item, x, y ) {
var elem = item.element;
var left = parseInt( elem.style.left, 10 );
var top = parseInt( elem.style.top, 10 );
deepEqual( [ left, top ], [ x, y ], 'item position ' + x + ', ' + y );
}
checkPosition( iso.items[0], 0, 0 );
checkPosition( iso.items[1], 60, 0 );
// check gutter
iso.options.fitRows = {
gutter: 10
};
iso.layout();
checkPosition( iso.items[0], 0, 0 );
checkPosition( iso.items[1], 70, 0 );
// check gutter, with element sizing
iso.options.fitRows = {
gutter: '.gutter-sizer'
};
iso.layout();
checkPosition( iso.items[0], 0, 0 );
checkPosition( iso.items[1], 78, 0 );
});
})();

13
test/index.html
Unescape View File

@ -21,7 +21,7 @@
<script src="../bower_components/outlayer/outlayer.js"></script> <script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.js"></script> <script src="../bower_components/masonry/masonry.js"></script>
<script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/item.js"></script> <script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script> <script src="../js/layout-mode.js"></script>
@ -39,6 +39,7 @@
<script src="get-segment-size.js"></script> <script src="get-segment-size.js"></script>
<script src="masonry-measure-columns.js"></script> <script src="masonry-measure-columns.js"></script>
<script src="masonry-stamp.js"></script> <script src="masonry-stamp.js"></script>
<script src="fit-rows.js"></script>
</head> </head>
<body> <body>
@ -121,5 +122,15 @@
<div class="item"></div> <div class="item"></div>
</div> </div>
<h2>fitRows</h2>
<div id="fitrows-gutter" class="container">
<div class="gutter-sizer"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body> </body>
</html> </html>

6
test/tests.css
Unescape View File

@ -74,3 +74,9 @@ body {
right: 25px; right: 25px;
top: 15px; top: 15px;
} }
/* ---- fit rows ---- */
#fitrows-gutter .gutter-sizer {
width: 10%;
}

Write Preview
Loading…
Cancel
Save