0

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

$(".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;   });
  });`

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

4

1 回答 1

1

你应该尝试这样的事情：

$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

于 2013-04-15T23:47:17.717 回答