私は現在、一連のボックスのサイズ変更と再レイアウトを支援するためにアイソトープを使用しています。div の 1 つのサイズを変更するときに、コンテンツを非表示の div に置き換えたいと思います。
アイデアを与えるコードの一部を次に示します。
$('#container-2').isotope({
childSelector: '.child-big',
masonry: {
columnWidth: 468
};
});
$('.child-big').click(function() {
var $this = $(this);
if ($this.hasClass('tall')) {
tileStyle = {
width: 468,
height: 150
};
}
else {
tileStyle = {
width: 468,
height: 190
};
}
$this.toggleClass('tall');
$this.find('.child-content').stop().animate(tileStyle);
$('#container-2').isotope('reLayout')
});
それが役立つ場合は、もう少しコードを追加します:http://jsfiddle.net/Mx6KH/4/
切り替える方法がわかりません。このプロジェクトの以前のバージョンでは、jQueryUI の addClass および removeClass 関数を使用していましたが、それがこのセットアップで適切かどうか、またはそれを達成するためのより簡単な方法があるかどうかはわかりません。それは少し扱いにくくなっていました。