0

我正在与 Isotope 合作在http://samsnow.alwaysdata.net/galerie创建一个响应式画廊。我在stackoverflow上查看了其他人是如何做到的，我自己编写了一段代码，但我需要一些帮助。

jQuery(document).ready(function($){ 

var $container = jQuery('#containerGalerie');
var columns = 4,
setColumns = function() { 
        screen = jQuery(window).width();
        if(screen>1630){
            columns = 5;
        }
        else if(screen>1280){
            columns = 4;
        }
        else if(screen>710){
            columns = 3;
        } 
        else if(screen>345){
            columns = 2;
        }
        else{
            columns = 1;
        };
        largeur=100/columns - 0.5;
        jQuery('.element').css('width', getLargeur);
        function getLargeur(){
            return largeur +'%';
        }
    };
setColumns();

jQuery(window).smartresize(function(){
    setColumns();
    $container.isotope({
         itemSelector : '.element',
        resizable: false, // disable normal resizing
          // set columnWidth to a percentage of container width
          masonry: { columnWidth: $container.width() / columns}
    });     
}).smartresize();

$container.imagesLoaded( function(){
    jQuery(window).smartresize();     
});


var $optionSets = jQuery('.option-set'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){  
    var $this = jQuery(this);
    // don't proceed if already selected
    /*
    if ( $this.parent().hasClass('active') ) {
        return false;
    }*/

    var $optionSet = $this.parents('.option-set');
    $optionSet.parent().find('.active').removeClass('active');
    $this.parent().addClass('active');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
    key = $optionSet.attr('data-option-key'),
    value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
        // changes in layout modes need extra logic
        changeLayoutMode( $this, options );
    } else {
        // otherwise, apply new options
        $container.isotope( options );
    }
    jQuery(".isotope-item a").attr("rel", "visible");
    jQuery(".isotope-hidden a").attr("rel", "nonvisible"); 
    jQuery(window).smartresize(); 
    return false;
});

});

由于我对图像使用 % 宽度和可变数量的列，因此我在过滤器上有一个错误。单击过滤器后，图像之间的大部分间隙都会消失。这可以通过再次单击过滤器或什至调整窗口大小来解决。

我不明白发生了什么。有人可以帮助我吗？

编辑：这是小提琴：http: //jsfiddle.net/SamSnow/8Am8N/1/

4

1 回答 1

1

我发现问题出在哪里：它是从一个有很多图像的过滤器（我的页面有一个滚动条）到另一个有很少图像的过滤器（=没有滚动条）的过渡。当滚动条出现/消失时没有刷新！不幸的是，我还没有设法修复它。

我依靠你的帮助！

于 2013-05-31T14:25:19.313 回答