javascript – 动态HTML无法与Isotope正确显示

问题简介

当屏幕加载时,它会加载一个空div,jquery稍后会单独调用Web服务,然后将生成的HTML转储.然后选择/取消选择元素以包含在计算中,结果无法正确显示.

问题是当Isotope初始化时,它将容器的高度设置为0px但溢出设置为auto.这意味着当通过AJAX返回ui时,插入的容器的高度为0.

Windows机器渲染溢出但Mac设备没有.

更新2014-02-27

在PC上,元素被赋予内联样式-webkit-transform

在PC上：

-webkit-transform: translate3d(243px,0px,0px) scale3d(1,1,1);

在MAC上：

-webkit-transform: translate3d(0px,180px,1);

截图

Mac(Chrome)屏幕截图：http://i.imgur.com/GXmrBjU.png

PC(Chrome)屏幕截图：http://i.imgur.com/KtulXhF.png

相关的JavaScript

$('body').on('click','.culture-location .primary.turn-off',function(event){
        var $this = $(this),teamIds = [],scores = [],$section = $this.closest('.listing-section'),$listing = $section.find('.listing-culture-dimensions'),$widgetBoxes = $listing.find('.widgetBox'),$widgetBox = $this.closest('.widgetBox'),$loader = $('.loader')
            ;

        event.preventDefault();

        if($widgetBox.hasClass('off')){
            $widgetBox.removeClass('off');
        }else{
            $widgetBox.addClass('off');    
        }

        $loader.fadeIn();
        $listing.fadeOut().data('scores',scores);


        $.each($widgetBoxes,function(){
            var $this = $(this);
           scores.push({
               id: $this.data('dimensionid'),score: $this.data('score')
           }); 
        });

        $section.find('.widget-team:not(.off)').each(function(){
            teamIds.push($(this).data('t'));
        });

        $listing.isotope().isotope('destroy');
        $listing.empty();

        $.ajax({
            url: '/xxx/xxxxxx',type: 'POST',data: {
                ...
            }
        }).done(function(response){
            var responSEObj = JSON.parse(response),lastscores = $listing.data('scores')
                ;
            $listing.html($(responSEObj.data));
            $listing.isotope().isotope('insert',$listing.find('.widgetBox'));
            $listing.find('.widgetBox').equalHeights(40);    
            $listing.find('.progress-circle').progressCircle();
            $listing.isotope('reLayout');
            $listing.fadeIn();
            $loader.fadeOut();
        });
    });

相关HTML

Box widget-culture purple3 isotope-item" data-score="82.000000000000" data-dimensionid="10" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px,0px);">
        Box -->
            Box widget-culture purple2 isotope-item" data-score="79.000000000000" data-dimensionid="12" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px,0px);">
        Box -->
            Box widget-culture purple isotope-item" data-score="79.000000000000" data-dimensionid="8" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(500px,0px);">
        Box -->
            Box widget-culture blue isotope-item" data-score="71.000000000000" data-dimensionid="15" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(750px,0px);">
        Box -->
            Box widget-culture lightblue isotope-item" data-score="71.000000000000" data-dimensionid="13" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1000px,0px);">
        Box -->Box widget-team isotope-item" data-t="1" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px,0px);">
        logout-1">Box -->
                        Box widget-team off isotope-item" data-t="2" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px,0px);">
        Box -->


最佳答案
我想到了.长话短说我认为Windows上的DOM操作发生得足够快,以便重新布局生效.
附加固定代码.

$listing.isotope('remove',$listing.find('.widgetBox'));            
$.ajax({
url: '/xxxx/xxxxxxxxxxxxx',data: {
    ta: teamIds,qty: 5,ps: scores,prefix: 'location'    
}
}).done(function(response){
var responSEObj = JSON.parse(response),lastscores = $listing.data('scores')
    ;

$listing.isotope('insert',$(responSEObj.data),function(){
    $listing.find('.widgetBox').equalHeights(40);    
    $listing.find('.progress-circle').progressCircle(); 
    $listing.isotope('reLayout');
});

$listing.fadeIn();
$loader.fadeOut();

});

javascript – 动态HTML无法与Isotope正确显示

猜你在找的CSS相关文章