За свою жизнь я не могу понять, что, черт возьми, происходит.Мое отсутствие знаний Jquery может быть как-то связано с этим ...
Взгляните на это: http://jsfiddle.net/ryanjay/fgNMJ/
Когда страница загружается, возникают большие пропуски по высотемежду каждой фотографией.Если щелкнуть фотографию, и она развернется, фотографии внизу снова встанут на свои места.При повторном нажатии на фотографию, чтобы свернуть ее, фотографии становятся на свои места, как и при загрузке страницы.Есть смысл?
Почему между фотографиями возникает разрыв по высоте при загрузке страницы?Я предполагаю, что это как-то связано с кодом (.box img) .css (), который у меня есть ... Но я просто не могу понять это.
Вот и код.
Jquery:
$(document).ready(function(){
$('#grid').masonry({
singleMode: false,
itemSelector: '.box',
resizeable: true,
animate: true
});
$('.box img').css({
width: '100%',
height: 'auto'
});
$('.box').click(function(){
if ($(this).is('.expanded')){
restoreBoxes();
} else {
$(this)
// save original box size
.data('size', [ $(this).width(), $(this).height() ])
.animate({
width: 400
}, function(){
$('#grid').masonry();
});
restoreBoxes();
$(this).addClass('expanded');
}
function restoreBoxes(){
var len = $('.expanded').length - 1;
$('.expanded').each(function(i){
var w = $(this).data('width');
$(this).animate({
width: ( w || '200' )
}, function(){
if (i >= len) {
$('#grid').masonry();
}
})
.removeClass('expanded');
});
}
});
});
CSS:
.wrap {
border: 0;
width: 100%;
}
.box {
float: left;
font-size: 11px;
width: 200px;
margin: 0px;
padding: 0px;
display: inline;
}