Javascript 响应数据未获取同位素位置

当我提交数据时，我有一个文本框，页面不会刷新并在框中显示该数据。但我的问题是，盒子没有显示在正确的位置。请找到图片，它会给你一个简单的想法。我用的是同位素js

刷新页面后，所有数据框位置正确显示，这意味着刷新后同位素位置正确显示。但如果没有刷新，响应数据将无法获得同位素位置。请检查firebug结果

萤火虫

<div class="card col2 padding-20 showbox" data-social="item" style="position: absolute; left: 0px; top: 200px;">
<div id="innerbox_1" class="card share col1" data-social="item" style="display: block;">
<div class="card share col1" data-social="item" style="position: absolute; left: 640px; top: 200px;">
<div class="card share col1" data-social="item" style="position: absolute; left: 960px; top: 200px;">

你能帮我解决这个问题吗

请检查下面给出的代码。如果您对代码有任何疑问，请告诉我

HTML

{{trans（'social/socialPage.customerHistoryLabel'）}
<div class="day" data-social="day">
<!-- START ITEM -->
<div class="card col2 padding-20 showbox" data-social="item">
<form id="form-for-freetext" class="simform no-margin" data-social="status" autocomplete="off" action="post">
    <div class="status-form-inner">
     <ol class="questions">
     <li class="current">
     <span>
     <label for="status-q1">{{ trans('social/socialPage.customerHistoryLabel') }}</label>
     </span>
     <span class="successMessage"></span>
     <input id="freetext" type="text" name="freetext" class="freetext">
     <input type="hidden" id="id" value="<?php echo $customerdetails->customer_id;?>">
     </li>
     </ol>
    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
    <input class="submit" type="submit" value="Send">
    <div class="controls">
    <div class="progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   </div>
   </form>
</div>
<!-- END ITEM -->
 <!-- START ITEM -->
 <div class="card share  col1" data-social="item">
 <div class="card-header ">
 <h5 class="text-complete pull-left fs-12">News <i class="fa fa-circle text-complete fs-11"></i></h5>
 <div class="pull-right small hint-text">5,345 <i class="fa fa-comment-o"></i>
 </div>
 <div class="clearfix"></div>
 </div>
 <div class="card-description">
 <h3>Ebola outbreak: Clinical drug trials to start next month as death toll mounts</h3>
 </div>
 <div class="card-footer clearfix">
 <div class="pull-left">via <span class="text-complete">CNN</span>
 </div>
 <div class="pull-right hint-text">Apr 23</div>
 <div class="clearfix"></div></div>
 </div>
<!-- END ITEM -->
</div>
 <!-- END DAY -->

var generateID = 1;
$('#form-for-freetext').on('keypress', function (e) {
    var key = e.which;
    if(key == 13)  // the enter key code
    {
        e.preventDefault();
        $(".progress").css( "width", "0%" ).attr( "aria-valuenow", 0);
        $(".progress").show();
        var freetext       = $('#freetext').val();
        var id             = $(":hidden", this).val();
        var token          = $('input[name=_token]').val();
        var dataString     = 'freetext='+freetext+'&id='+id+'&token='+token;
        $.ajax({
            type: "post",
            url: "{!! URL::to('socialfreetext') !!}",
            data: dataString,
            success: function(data) {
                // Progress bar begin
                var stops = [0, 50, 100];
                $.each(stops, function(index, value){
                    setTimeout(function(){
                        $(".progress").css( "width", value + "%" ).attr('aria-valuenow', value );
                    }, index * 100);
                    $(".progress").css( "width", value + "%" ).attr('aria-valuenow', value ).fadeOut(5000);
                });

                // Progress bar end

                // Response data begin
                var date           = data.responsecusthistory.created_at.split(" ")[0];
                $(".showbox").after('<div class="card share col1" data-social="item" id="innerbox_'+generateID+'"><div class="circle" data-toggle="tooltip" title="Label" data-container="body"></div><div class="card-header clearfix"><div class="user-pic"><img alt="Profile Image" width="33" height="33" data-src-retina="/assets/img/profiles/avatar.jpg" data-src="/assets/img/profiles/avatar.jpg" src="/assets/img/profiles/avatar.jpg"></div><h5 style="margin-top:0;"><?php echo $customerdetails->firstname ." ". $customerdetails->lastname; ?></h5><h6><span class="location semi-bold"><i class="fa fa-map-marker"></i> <?php echo $customerdetails->street .",". $customerdetails->city; ?></span></h6></div><div class="card-description"><p>'+data.responsecusthistory.freetext+'</p><div class="via">via Twitter</div></div><div class="card-footer clearfix" style="border-top: 1px solid #e1f0fd;"><div class="time">'+date+'</div><ul class="reactions"><li><a href="#">5,345 <i class="fa fa-comment-o"></i></a></li><li><a href="#">23K <i class="fa fa-heart-o"></i></a></li></ul></div></div>');
                //$('.innerbox').css('display', 'inline');
                //$('.innerbox').show("slow");
                //$('.innerbox').css('display', 'inline');
                $("#innerbox_"+generateID).hide().fadeIn(2000);
                generateID++;
                // Response data end

            },
            error: function(data) {
                if( data.status === 422 ) {
                    //process validation errors here.
                    var errors = data.responseJSON;
                    errorsHtml = '<div class="alert alert-danger"><ul>';
                    $.each( errors , function( key, value ) {
                        errorsHtml += '<li>' + value[0] + '</li>';
                    });
                    errorsHtml += '</ul></div>';
                    $( '.error-message' ).html( errorsHtml );
                }
            }
        });
        $('#freetext').val('');
        return false;
    }
    //window.setTimeout(function() { $(".progress").alert('close'); }, 100);
});

/* ============================================================
 * Pages Social
 * ============================================================ */
<script>
(function($) {

    'use strict';

    // SOCIAL CLASS DEFINITION
    // ======================

    var Social = function(element, options) {
        this.$element = $(element);
        this.options = $.extend(true, {}, $.fn.social.defaults, options);
        this.$day =
            this.resizeTimeout =
            this.columns =
            this.colWidth = null;
        this.init();
    }
    Social.VERSION = "1.0.0";

    Social.prototype.init = function() {
        this.$cover = this.$element.find(this.options.cover);
        this.$day = this.$element.find(this.options.day);
        this.$item = this.$element.find(this.options.item);
        this.$status = this.$element.find(this.options.status);
        this.colWidth = this.options.colWidth;

        var _this = this;

        // TODO: transition disabled for mobile (animation starts after touch end)


        // Prevent 'vh' bug on iOS7
        if($.Pages.getUserAgent() == 'mobile'){
            //var wh = $(window).height();
            this.$cover.length && this.$cover.css('height', 400);
        }

        setTimeout(function() {
            this.$day.length && this.$day.isotope({
                transformsEnabled: false,
                "itemSelector": this.options.item,
                "masonry": {
                    "columnWidth": this.colWidth,
                    "gutter": 20,
                    "isFitWidth": true
                }
            });
        }.bind(this), 500);

    }

    // Set container width in order to align it horizontally. 

    Social.prototype.setContainerWidth = function() {
        var currentColumns = Math.floor(($('body').width() - 100) / this.colWidth);
        if (currentColumns !== this.columns) {
            // set new column count
            this.columns = currentColumns;
            // apply width to container manually, then trigger relayout
            this.$day.length && this.$day.width(this.columns * (this.colWidth + 20));
        }
    }


    // SOCIAL PLUGIN DEFINITION
    // =======================

    function Plugin(option) {
        return this.each(function() {
            var $this = $(this);
            var data = $this.data('pg.social');
            var options = typeof option == 'object' && option;

            if (!data) $this.data('pg.social', (data = new Social(this, options)));
            if (typeof option == 'string') data[option]();
        })
    }

    var old = $.fn.social

    $.fn.social = Plugin
    $.fn.social.Constructor = Social

    $.fn.social.defaults = {
        cover: '[data-social="cover"]',
        day: '[data-social="day"]',
        status: '[data-social="status"]',
        item: '[data-social="item"]',
        colWidth: 300
    }

    // SOCIAL NO CONFLICT
    // ====================

    $.fn.social.noConflict = function() {
        $.fn.social = old;
        return this;
    }

    // SOCIAL DATA API
    //===================

    $(window).on('load', function() {
        $('[data-pages="social"]').each(function() {
            var $social = $(this);
            $social.social($social.data());

            setTimeout(function() {
                $social.find('[data-social="status"] li.current input').focus();
            }, 1000);

        })
    })

    $(window).on('resize', function() {
        $('[data-pages="social"]').each(function() {
            var $social = $(this);

            clearTimeout($social.data('pg.social').resizeTimeout);

            $social.data('pg.social').resizeTimeout = setTimeout(function() {
                // $social.data('pg.social').setContainerWidth();
                $social.data('pg.social').$day.isotope('layout');
            }, 300);

        });

    });


})(window.jQuery);