动态HTML无法与Isotope正确显示

Question

问题简介

当屏幕加载时,它会加载一个空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, 0px) scale3d(1, 1, 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

<div class="listing-section" data-l="0">
            <div class="header">
                <h4>Virtual Teams</h4>
                <p> </p>    
            </div>
            <div class="listing listing-culture-dimensions isotope loaded" style="position: relative; height: 365px;"><div class="widgetbox widget-culture purple3 isotope-item" data-score="82.000000000000" data-dimensionid="10" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
        <div class="widget-head">
            <div class="progress-circle">
                <span class="indicator hide"></span>
                <div class="value"><span>82</span><small>%</small></div>
            <div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(295.2deg);"></div><div class="pie fill"></div></div></div>
            <div class="num">1</div>
            <h6 class="text-ucfirst">teamwork</h6>
        </div>
        <div class="widget-overlay">
            <a href="#" class="btn-more">Read More</a>
            <a href="#" class="btn-less">Read Less</a>
        </div>
        <div class="culture-entry" style="height: 238px;">
            <p class="text-ucfirst">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.</p>
        </div>
    </div><!-- /.widgetbox -->
            <div class="widgetbox widget-culture purple2 isotope-item" data-score="79.000000000000" data-dimensionid="12" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px, 0px, 0px);">
        <div class="widget-head">
            <div class="progress-circle">
                <span class="indicator hide"></span>
                <div class="value"><span>79</span><small>%</small></div>
            <div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(284.40000000000003deg);"></div><div class="pie fill"></div></div></div>
            <div class="num">2</div>
            <h6 class="text-ucfirst">support</h6>
        </div>
        <div class="widget-overlay">
            <a href="#" class="btn-more">Read More</a>
            <a href="#" class="btn-less">Read Less</a>
        </div>
        <div class="culture-entry" style="height: 238px;">
            <p class="text-ucfirst">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.</p>
        </div>
    </div><!-- /.widgetbox -->
            <div class="widgetbox widget-culture purple isotope-item" data-score="79.000000000000" data-dimensionid="8" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(500px, 0px, 0px);">
        <div class="widget-head">
            <div class="progress-circle">
                <span class="indicator hide"></span>
                <div class="value"><span>79</span><small>%</small></div>
            <div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(284.40000000000003deg);"></div><div class="pie fill"></div></div></div>
            <div class="num">3</div>
            <h6 class="text-ucfirst">service</h6>
        </div>
        <div class="widget-overlay">
            <a href="#" class="btn-more">Read More</a>
            <a href="#" class="btn-less">Read Less</a>
        </div>
        <div class="culture-entry" style="height: 238px;">
            <p class="text-ucfirst">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.</p>
        </div>
    </div><!-- /.widgetbox -->
            <div class="widgetbox widget-culture blue isotope-item" data-score="71.000000000000" data-dimensionid="15" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(750px, 0px, 0px);">
        <div class="widget-head">
            <div class="progress-circle">
                <span class="indicator hide"></span>
                <div class="value"><span>71</span><small>%</small></div>
            <div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(255.6deg);"></div><div class="pie fill"></div></div></div>
            <div class="num">4</div>
            <h6 class="text-ucfirst">structure</h6>
        </div>
        <div class="widget-overlay">
            <a href="#" class="btn-more">Read More</a>
            <a href="#" class="btn-less">Read Less</a>
        </div>
        <div class="culture-entry" style="height: 238px;">
            <p class="text-ucfirst">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.</p>
        </div>
    </div><!-- /.widgetbox -->
            <div class="widgetbox widget-culture lightblue isotope-item" data-score="71.000000000000" data-dimensionid="13" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1000px, 0px, 0px);">
        <div class="widget-head">
            <div class="progress-circle">
                <span class="indicator hide"></span>
                <div class="value"><span>71</span><small>%</small></div>
            <div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(255.6deg);"></div><div class="pie fill"></div></div></div>
            <div class="num">5</div>
            <h6 class="text-ucfirst">opportunity</h6>
        </div>
        <div class="widget-overlay">
            <a href="#" class="btn-more">Read More</a>
            <a href="#" class="btn-less">Read Less</a>
        </div>
        <div class="culture-entry" style="height: 238px;">
            <p class="text-ucfirst">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.</p>
        </div>
    </div><!-- /.widgetbox --></div>
            <div class="listing listing-culture-teams isotope loaded" style="position: relative; height: 111px;"><div class="widgetbox widget-team isotope-item" data-t="1" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
        <div class="widget-head">
                            <div class="label-new">New</div>
                            <h6><a href="#" class="text-capitalize">My Team</a></h6>
        </div>
        <div class="member-thumbs">
            <div class="member-limiter"></div>
                                                    <div class="member-thumb  purple3  ">
                    <span class="m-mask"></span>
                    <span class="m-check"></span>
                    <img src="/files/image/7AF5A396-D339-4E86-9D80-682133C47C5F/30" alt="Eric Miller">
                </div>
                                            </div>

        <div class="widget-overlay">
            <span class="flaticon solid battery-charging-3"></span>
        </div>

        <div class="widget-bar">
            <a href="#" class="primary turn-off"><span class="flaticon stroke logout-1"></span><span class="flaticon solid battery-charging-3"></span></a>
            <a href="/modal/editteam/1" data-popup=""><span class="flaticon stroke compose-1"></span> edit</a>
            <a href="/culture/teams/1"><span class="flaticon stroke activity-monitor-1"></span> values</a>
        </div>
    </div><!-- /.widgetbox -->
                        <div class="widgetbox widget-team off isotope-item" data-t="2" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px, 0px, 0px);">
        <div class="widget-head">
                            <div class="label-new">New</div>
                            <h6><a href="#" class="text-capitalize">VT2</a></h6>
        </div>
        <div class="member-thumbs">
            <div class="member-limiter"></div>
        </div>

        <div class="widget-overlay">
            <span class="flaticon solid battery-charging-3"></span>
        </div>

        <div class="widget-bar">
            <a href="/modal/editteam/2" data-popup=""><span class="flaticon stroke compose-1"></span> edit</a>
            <a href="/culture/teams/2"><span class="flaticon stroke activity-monitor-1"></span> values</a>
        </div>
    </div><!-- /.widgetbox --></div>
        </div>

Answer 1

我想到了。长话短说，我认为 Windows 上的 DOM 操作发生得足够快，足以使重新布局生效。

附固定代码。

$listing.isotope('remove', $listing.find('.widgetbox'));            
$.ajax({
url: '/xxxx/xxxxxxxxxxxxx',
type: 'POST',
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();

});