Masonry - Divs stack correctly only once on each page load

问题

I have a problem with a site that uses Masonry library to produce stacked divs. When I refresh the page and click on a single tab on the page, I get the correct stacking. However, after clicking on the other tab without refreshing the page I fetch data and populate the document with various divs.

Only when I click on a tab after immediate load, do I see the stacking properly done. When I click on another tab after clicking on one or more tabs, I see incorrect stacking.

I am forced to refresh the page and then press a tab once to get the correct result.

What am I doing wrong and how can I fix this behavior?

HTML

<div id="tabDiv">
    <ul class="tabbed">
    <li id="tab1"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(1)" style="width:100%">Designers</a></div></li>
    <li id="tab2"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(2)" style="width:100%">Viz Artists</a></div></li>
    <li id="tab3"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(3)" style="width:100%">Production Artists</a></div></li>
    <li id="tab4"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(4)" style="width:100%">2D Artists</a></div></li>
    <li id="tab5"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(5)" style="width:100%">Help Desk</a></div></li>
    </ul>
</div>
<br />

<div id="gridDiv">

</div> 

JS

 function FetchGroupJobs(WorkGroupID) {
     $.ajax({
                url: url,
                data:data,
                success : function (json) {  //First get users
                    for (var key in json) { //Then loop through users to get jobs
                        addGridToDiv(key);
                        $("#grid" + key).kendoGrid({
                            dataSource: {
                                transport: {
                                    read: {
                                        url: '/api/workgroupreport/' + WorkGroupID + '/' + json[key].ArtistID,
                                        dataType: "json",
                                        async: false
                                    }
                                }
                            },
                            dataBound: function()
                            {
                                var header = $("#grid" + key + " tr")[0];
                                $(header).append("<th class='count'>" + this.dataSource.total() + "</th>");
                            },
                            columns: [
                                {
                                    field: "JobDescription",
                                    title: json[key].ArtistName
                                }
                            ]
                        });
                    }
                },
                dataType: "json",
                async: false
            });
    }
            $(document).ready(function () {

                $('#gridDiv').masonry({
                    itemSelector: '.k-grid',
                    columnWidth: 210,
                    gutter: 10
                });


            });`

回答1:

I used the following code to resolve the problem. The main addition was to call $('#gridDiv').masonry('destroy') in the function.

  function FetchGroupJobs(WorkGroupID) {

    $('#gridDiv').masonry('destroy');

    $.ajax({
        url: url,
        data: data,
        success: function (json) {  //First get users
            for (var key in json) { //Then loop through users to get jobs
                addGridToDiv(key);
                $("#grid" + key).kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: '/api/workgroupreport/' + WorkGroupID + '/' + json[key].ArtistID,
                                dataType: "json",
                                async: false
                            }
                        }
                    },
                    dataBound: function () {
                        var header = $("#grid" + key + " tr")[0];
                        $(header).append("<th class='count'>" + this.dataSource.total() + "</th>");
                    },
                    columns: [
                        {
                            field: "JobDescription",
                            title: json[key].ArtistName
                        }
                    ]
                });
            }

            $('#gridDiv').masonry({
                itemSelector: '.k-grid',
                columnWidth: 210,
                gutter: 10
            });
        },
        dataType: "json",
        async: false
    });

}

来源：https://stackoverflow.com/questions/25255568/masonry-divs-stack-correctly-only-once-on-each-page-load