不工作于ajax响应的砌体

Question

在我的ajax响应中没有工作的砌体。我尝试过这样的一些，但它对我不起作用。我的代码ajax代码是：

<script>
function loadmore(cnt)
    {
        var val = document.getElementById("result_no").value;
        $.ajax({
            type: 'get',
            url: '{{ URL::route('oi_array3') }}',
            data: {
            last:val,cnt
            },
            success: function (response) {
                var content = document.getElementById("uf");
                if (response == '') {
                    $("#load").hide();
                }

              `  response.forEach(function(value){
                    var d = new Date(value.timestamp);
                    var n = d.toDateString();
                    var s = d.toLocaleTimeString();

                    content.innerHTML += '<div class="grid-item oi_data_tile">' + 
                    '<div class="small-12 text-right timestamp columns">' + n + ' ' + s + '</div>' + 
                    '<label class="small-6 columns">Underlying Index</label>' + 
                    '<label class="small-6 text-right nifty_index columns">' +
                    '<strong>' + value.underlying_index + '</strong>' +
                    '</label>' +
                    '<label class="small-6 columns">Diff. in change in OI</label>' +
                    '<label class="small-6 text-right nifty_index columns">' +
                    '<strong>' + value.diff_in_change_in_oi + '</strong></label>' +

                    '<div class="small-12 columns">'+
                        '<table class="small-12 columns">'+
                            '<tr class="header">' +
                                '<td class="small-3">Chng in OI Call</td>' +
                                '<td class="small-3">Strike<br>price</td>' +
                                '<td class="small-3">Chng in OI Put</td>' +
                                '<td class="small-3">Diff in Chng in OI</td>' +
                            '</tr>'+    

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[0].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[0].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[0].change_in_oi_put + '</td>' +
                                '<td class="text-right bullish">' + value.derivatives[0].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[1].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[1].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[1].change_in_oi_put + '</td>' +
                                '<td class="text-right bullish">' + value.derivatives[1].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[2].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[2].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[2].change_in_oi_put + '</td>' +
                                '<td class="text-right bearish">' + value.derivatives[2].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                        '</table>' +
                    '</div>'+
                    '</div>' 
                    if(document.getElementById("result_no").value == '0')
                        document.getElementById("latestvalue").value = value.timestamp;

                    document.getElementById("result_no").value = value.timestamp;



                });   
            }//response close
        });//ajax close
    }//loadmore close

    $('.grid').masonry({
        columnWidth : 320, 
        gutter: 15,
        percentPosition: false, 
        fitWidth: true,
        isFitWidth: true,
        itemSelector: '.grid-item'
    });

    $('.grid').imagesLoaded(function() {
        $('.grid').masonry('layout');
    }); 

</script>

Html代码是：

<div class="small-12 columns" id="uf1">
    <div class="grid" id="uf">
    <!-- ajax response is added here.-->

    </div>
    <input type="hidden" id="result_no" value="0">
</div>

我希望将ajax响应放在id中，并在响应中应用砌体。

Answer 1

在将内容添加到DOM之后，您需要重新初始化砌体。这就是砖石工能够针对新添加的元素的方式。

$('.grid').masonry();

每次加载新内容后调用它。