jQuery/Masonry的帮助，细微调整 [英] Help with Jquery/Masonry, minor tweak

问题描述

对于我的一生，我无法弄清楚到底发生了什么.我缺乏Jquery知识可能与它有关...

For the life of me, I can;t figure out what the heck is going on. My lack of Jquery knowledge might have something to do with it...

看看这个: http://jsfiddle.net/ryanjay/fgNMJ/

加载页面时，每张照片之间在高度方向上存在较大的间隙.单击照片并将其展开时，底部的照片会放回原处.再次单击照片以将其折叠时，照片会像加载页面时一样落入原位.有道理?

When the page loads, there is major gaps, height-wise, in between each photograph. When you click a photo, and it expands, the photos on the bottom fall back into place. When the photo is clicked again to collapse it, the photos fall into place as they should when the page is loaded. Make sense?

为什么在装入页面时，照片之间在高度方向上没有间隙?我假设它与我正在进行的(.box img).css()代码有关...但是我只是想不通.

Why is there a gap between the photos, height-wise, when the page is loaded? I am assuming it has something to do with (.box img).css() code I have going on... But I just can't figure it out.

这也是代码.

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;
}

推荐答案

我认为我已解决它.

http://jsfiddle.net/fgNMJ/144/

删除:

$('.box img').css({
    width: '100%',
    height: 'auto'
});

修改CSS

.box img{
   width:100%;   
}

另一个 您可以将$('.box img').css...调用移到masonry调用上方.

Another You could just Move the $('.box img').css... call above the masonry call.

http://jsfiddle.net/fgNMJ/145/

这篇关于jQuery/Masonry的帮助，细微调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！