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

sotope loaded" style="position: relative; height: 365px;">
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);">
        
irst">teamworkirst">A chief value of this location is teamwork. Most of the people at this location tend to seek collaborative solutions and to employ group efforts to overcome challenges. Many of them prefer working with others to working alone. Collaboration and cooperation are highly valued,and this fact has contributed to the success of this location.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);">
        
irst">supportirst">A primary value of this location is support. Many of the people in this location find value in organizations that invest in their employees by providing resources and support to accomplish personal and professional goals.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);">
        
irst">serviceirst">One of the main values of this location is service. Many of the people at this location find fulfillment in helping others and put high value in surpassing the expectations of customers. For this reason this location is able to offer high standards in customer service.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);">
        
irst">structureirst">One of the principal work values at this location is structure. Most people at this location value having a clearly defined structure and having rules for how work is completed. The location tends toward being rule-bound and has a consistent and predictable work environment with clearly established procedures.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);">
        
irst">opportunityirst">One of the most important values at this location is opportunity. Many of the people at this location value having clear pathways for advancement and appreciate the guidance and recognition they receive to identify career opportunities within your organization. Many of the employees at this location are motivated by the kNowledge that their contributions are noticed and that opportunities for promotion are provided.Box -->sotope loaded" style="position: relative; height: 111px;">
Box widget-team isotope-item" data-t="1" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px,0px);">
        
stroke logout-1">stroke compose-1">stroke activity-monitor-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);">
        
stroke compose-1">stroke activity-monitor-1">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();

});

原文地址：https://www.jb51.cc/css/427179.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。