3
다른 항목의 크기를 변경 한 후 작은 항목을 빈 칸으로 옮기고 싶습니다.jQuery 동위 원소에서 reLayout 이후에 작은 항목을 빈 공간에 맞 춥니 다
이는 jsfiddle에 모습입니다 : http://jsfiddle.net/FRH8v/
예를 들어 더 클릭하지 않을 때. 2, 그 위에 두 개의 빈 공간이 생깁니다. 그 공간을 채우기 위해 작은 항목을 이동하는 방법? 여기
코드 (jsfiddle에 같은 동일)입니다 :
$(function(){
// Modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
containerWidth = this.element.width();
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
// Or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// If there's no items, use size of container
containerWidth;
this.masonry.columnWidth += gutter;
this.masonry.cols = Math.floor((containerWidth + gutter)/this.masonry.columnWidth);
this.masonry.cols = Math.max(this.masonry.cols, 1);
};
$.Isotope.prototype._masonryReset = function() {
// Layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getMasonryGutterColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push(0);
}
};
$.Isotope.prototype._masonryResizeChanged = function() {
var prevSegments = this.masonry.cols;
// Update cols/rows
this._getMasonryGutterColumns();
// Return if updated cols/rows is not equal to previous
return (this.masonry.cols !== prevSegments);
};
var $container = $('#container'),
$element = '.element';
$container.isotope({
itemSelector: $element,
resizable: false,
transformsEnabled: true,
animationEngine: 'best-available',
layout: 'masonry',
masonry: {
gutterWidth: 4,
columnWidth: 157
}
});
// click action
$container.find($element).each(function(){
var that = $(this);
that.click(function(){
if(that.hasClass('active')){
$container.find($element).removeClass('active');
} else {
$container.find($element).removeClass('active');
that.addClass('active');
}
$container.isotope('reLayout');
return false;
});
});
});