Question

我对使用Masonry库生成堆叠div的网站有疑问。当我刷新页面并单击页面上的单个选项卡时，我得到了正确的堆叠。但是，在没有刷新页面的情况下单击其他选项卡后，我获取数据并使用各种div填充文档。

只有在我立即加载后单击选项卡时，才能正确完成堆叠。单击一个或多个选项卡后单击其他选项卡时，我看到堆叠不正确。

我被迫刷新页面，然后按一下标签以获得正确的结果。

我做错了什么以及如何解决此问题？

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
                });


            });`

Answer 1

我使用以下代码来解决问题。主要的补充是在函数中调用$（＆＃39;＃gridDiv＆＃39;）。砌体（＆＃39; destroy＆＃39;）。

  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
    });

}

砌体 - 在每次页面加载时，Divs只能正确堆叠一次

1 个答案: