Попробуйте это ( демо здесь ):
$(document).ready(function(){
$('#grid').masonry({
singleMode: false,
itemSelector: '.box',
animate: true
});
$('.box').click(function(){
if ($(this).is('.expanded')){
restoreBoxes();
} else {
restoreBoxes();
$(this)
// save original box size
.data('size', [ $(this).width(), $(this).height() ])
.animate({
width: 335,
height: 335
}, function(){
$('#grid').masonry();
})
.addClass('expanded');
}
function restoreBoxes(){
var len = $('.expanded').length - 1;
$('.expanded').each(function(i){
var box = $(this).data('size');
$(this).animate({
width: ( box[0] || 100 ),
height: ( box[1] || 'auto' )
}, function(){
if (i >= len) {
$('#grid').masonry();
}
})
.removeClass('expanded');
})
}
});
});
Обновление: Привет, Джем, я не знал, что ты оставил комментарий для меня, в следующий раз, пожалуйста, добавь комментарии под ответом или обнови свой вопрос. Также вы можете поставить «@» перед именем человека, и он получит флаг сообщения.
В ответ на ваш вопрос о размере набора и скрытом контенте я изменил демо 1010 * (в основном все HTML и CSS включены), чтобы отображать блоки различной ширины. Если щелкнуть поле, чтобы развернуть все скрытое содержимое, возникает небольшая проблема. Обычно скрытый контент имеет высоту и ширину ноль. Но jQuery может определить размер скрытого контента, но у него все еще есть некоторые проблемы, потому что вам может потребоваться ограничить ширину или высоту скрытого контента. Так что я закончил тем, что добавил скрытое содержимое внутри блока и добавил атрибут data-size в блок, который содержит ширину и высоту раскрытого скрытого содержимого, например:
<div class="box" data-size="380,380">
<p>This is the visible content.</p>
<div class="expandable">
This is the hidden content which shows when the box is clicked.
</div>
</div>
Я также включил способ скрытия видимого содержимого при развертывании поля, добавив класс hideable к содержимому, поскольку на предоставленном изображении, по-видимому, скрыто исходное содержимое:
<div class="box" data-size="380,380">
<p class="hideable">This is the visible content.</p>
<div class="expandable">
This is the hidden content which shows when the box is clicked.
</div>
</div>
Если атрибут data-size не установлен, сценарий по умолчанию установит defaultSize:
Примечание в демоверсии используется $(document).ready(function(){...}) вместо $(window).load(function(){...}), как рекомендовано автором кладки, поскольку jFiddle просто не хочет работать с загрузкой окна.
$(window).load(function () {
var defaultSize = [180, 180]; // expanded box size: [width , height]
$('#grid').masonry({
singleMode: false,
columnWidth: 100,
resizeable: true,
itemSelector: '.box',
animate: true
});
$('.box').click(function () {
if ($(this).is('.expanded')) {
restoreBoxes();
} else {
var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
$(this)
// save original box size
.data('size', [$(this).width(), $(this).height()]).animate({
width: size[0],
height: size[1]
}, function () {
// show hidden content when box has expanded completely
$(this).find('.expandable').show('slow');
$(this).find('.hideable').hide('slow');
$('#grid').masonry();
});
restoreBoxes();
$(this).addClass('expanded');
}
function restoreBoxes() {
var len = $('.expanded').length - 1;
$('.expanded').each(function (i) {
var box = $(this).data('size');
$(this).find('.expandable').hide('slow');
$(this).find('.hideable').show('slow');
$(this).animate({
width: (box[0] || 100),
height: (box[1] || 'auto')
}, function () {
if (i >= len) {
$('#grid').masonry();
}
}).removeClass('expanded');
})
}
});
});