代码之家 › 专栏 › 技术社区 › Sudhanshu Saxena

同位素直线向下布局模式与无限滚动之间的不均匀空间

jquery-isotope yii jquery

Sudhanshu Saxena · 技术社区 · 11 年前

我在Yii MVC中有一个带有无限滚动的产品列表。我已经实现了两种布局模式来增加用户体验

$(".layouts .list").click(function () {
 jQuery(function() {
            var jQuerycontainer = jQuery('.items');
            jQuerycontainer.find('.view ').each(function() {
                jQuery(this).addClass('large');
            });
            jQuerycontainer.isotope({
                layoutMode: 'straightDown',
                itemSelector: '.view',
                straightDown: {
                      columnWidth: 50
                } 
            });
            $(document).ajaxComplete(function() {
                jQuery(".layouts .list").click();
            });
            jQuerycontainer.find('.view').removeClass('small');
            jQuery(this).addClass('large');});
   return false; });


//-----------------Grid Click Function---------------//   
    $(".layouts .grid").click(function () {
        jQuery(function() {
            var jQuerycontainer = jQuery('.items');
            jQuerycontainer.find('.view ').each(function() {
                jQuery(this).addClass('small');
            });
            jQuerycontainer.isotope({ 
                layoutMode: 'masonry',
                itemSelector: '.view',

                masonry: {
                    columnWidth: 50
                }
            });
            $(document).ajaxComplete(function() {
               jQuery(".layouts .grid").click();
            });
            jQuerycontainer.find('.view').removeClass('large');
            jQuery(this).addClass('small');
            jQuerycontainer.isotope('reLayout');

        }); 
 return false;   });
  });`

主要的问题是,当我切换到网格时,它以网格样式显示项目。但当我切换回列表模式时,它正确地显示列表,但在一些项目后面有一些不均匀的空格,当我重新单击列表时,它会自动相应地重新排列。

1 回复 | 直到 11 年前

lolo 11 年前

你应该试试这样的方法:

$container.isotope({
    masonry {
    columnWidth: 50,
    },
    straightDown: {
    columnWidth: 50,
    }
});


var isMasonry = true;

$('.layouts .grid').click( function() {

    isMasonry= !isMasonry;
    var sizeStyle = isMasonry ?
      { minWidth: '100%', minHeight: '100%' } :
      { minWidth: '100%', height: '100%' };

    $container.addClass('no-transition').css( sizeStyle );
    var redraw = $container[0].offsetHeight;

    $container.removeClass('no-transition')
    .isotope({
        layoutMode: isMasonry ? 'masonry' : 'straightDown'
    });

为了避免同位素元素之间的任何间隙,您需要使用css转换做一些技巧。

请参阅David Desandro的示例: http://codepen.io/desandro/pen/ivjAI