Im using Jquery Isotope
i have one item width greater than other div. All items align well but the items are not aligning properly under large width element.
http://jsfiddle.net/S5vAG/1381/
<div id="container">
<div class="item">1</div>
<div class="item large">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
$(function(){
var $container = $('#container'),
$items = $('.item');
$container.isotope({
itemSelector: '.item',
layoutMode : 'fitColumns',
resizesContainer : true,
getSortData : {
fitOrder : function( $item ) {
var order,
index = $item.index();
if ( $item.hasClass('large') && index % 2 ) {
order = index + 1.5;
} else {
order = index;
}
return order;
}
},
sortBy : 'fitOrder'
});
$items.click(function(){
var $this = $(this);
// nothing to change if this already has large class
if ( $this.hasClass('large') ) {
return;
}
var $previousLargeItem = $items.filter('.large');
$previousLargeItem.removeClass('large');
$this.addClass('large');
$container
// update sort data on changed items
.isotope('updateSortData', $this )
.isotope('updateSortData', $previousLargeItem )
// trigger layout and sort
.isotope();
});
});
Can someone please explain why this happening or please provide me a better solution.
Basically the reason it is behaving the way that it is, is that is what the fitColumns
option does; the items are arranged in vertical columns one above the other regardless of the size of the items being arranged.
To get a better view of the available layout options and how they look with items of different sizes check out this Working Example.
It sounds like you may want to try layoutMode: 'masonryHorizontal'
.
Working Example using masonryHorizontal
$(function(){
var $container = $('#container'),
$items = $('.item');
$container.isotope({
itemSelector: '.item',
layoutMode : 'masonryHorizontal', // Important Bit
resizesContainer : true,
getSortData : {
fitOrder : function( $item ) {
var order,
index = $item.index();
if ( $item.hasClass('large') && index % 2 ) {
order = index + 1.5;
} else {
order = index;
}
return order;
}
},
sortBy : 'fitOrder'
});
$items.click(function(){
var $this = $(this);
// nothing to change if this already has large class
if ( $this.hasClass('large') ) {
return;
}
var $previousLargeItem = $items.filter('.large');
$previousLargeItem.removeClass('large');
$this.addClass('large');
$container
// update sort data on changed items
.isotope('updateSortData', $this )
.isotope('updateSortData', $previousLargeItem )
// trigger layout and sort
.isotope();
});
});
Note in the example I changed the width of .items.large
so that it would look even.
use layoutMode : 'masonry',
fiddle link : http://jsfiddle.net/S5vAG/1382/
I am extracting data from a database that I do not administer. It is a single list, and the important values are: Folder Name Index Integer UID (unique identification) String Filename I have ...
I am extracting data from a database that I do not administer. It is a single list, and the important values are: Folder Name Index Integer UID (unique identification) String Filename I have ...
I want to recognize "Str","Int","[Str]","[Int]","[[Str]]",... I thought I could do something like (Str|Int|\[\1\]) where \1 self references the group. I know from formal language theory that ...
I want to recognize "Str","Int","[Str]","[Int]","[[Str]]",... I thought I could do something like (Str|Int|\[\1\]) where \1 self references the group. I know from formal language theory that ...
I was trying to test using JavaScript scripts to add content to a template at the time of processing by a PDF render-er, specifically Apache FOP. I know that XSL can call a javascript file that can in ...
I was trying to test using JavaScript scripts to add content to a template at the time of processing by a PDF render-er, specifically Apache FOP. I know that XSL can call a javascript file that can in ...
On the Node-Webkit web site (https://github.com/rogerwang/node-webkit/wiki/File-dialogs) it says to use the <Input type="file"> to bring up a file picker dialog, and then listen for the change ...
On the Node-Webkit web site (https://github.com/rogerwang/node-webkit/wiki/File-dialogs) it says to use the <Input type="file"> to bring up a file picker dialog, and then listen for the change ...