Question

我正在与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/

Answer 1

我发现了问题所在：它是从具有大量图像的过滤器（我的页面有滚动条）过渡到另一个图像很少（=无滚动条）。当滚动条出现/消失时，没有刷新！不幸的是我没有设法解决它。

我依靠你的帮助！

JQuery Isotope - 使用响应式网格进行过滤时，间隙消失

1 个答案: