同位素布局方法没有布局项目

Question

对于我的项目我使用Isotope过滤我的数据库中的所有项目， 但是当没有找到任何项目时，它应该从API中加载一些

所以我有一个名为getAPIitems的函数，当没有找到任何项目时会调用此函数， 现在我有一个硬编码元素用于测试它，

但问题是API项目不像我的数据库项目那样得到布局，它们都会出现在彼此之上：

虽然它应该显示这样的项目：

这是添加元素的代码

function getAPIitems() {
    addToIsotope();
}

function addToIsotope() {
    var elem = '<div class="shop_box     apiItem" style="position: absolute; left: 0px; top: 0px;">' +
        '<a href="ProductDetail.aspx?productID=1">' +
        '<div class="shop_image">' +
        '<img id="MainContent_Items_LabelImage_0" src="productsImages/2155567690287400.png">' +
        '</div>' +
        '<span id="MainContent_Items_new_0" class="new-box">' +
        '<span class="new-label">New</span>' +
        '</span>' +
        '</a>' +
        '<div class="shop_desc">' +
        '<h3>' +
        '<a href="ProductDetail.aspx?productID=1">The North Face® Cat\'s Meow 20° Sleeping Bag</a>' +
        '</h3>' +
        '<p>Three-season mountaineering starts here with a quintessential synthetic-insulated sleeping bag rated to 20°. As part of the Core series, the</p>' +
        '<span class="actual">€  200.00</span>' +
        '<span id="MainContent_Items_reducedfrom_0" class="reducedfrom">€ 205.00</span' +
        '<ul class="buttons">' +
        '<li class="cart">' +
        '<a ng-click="UpdateBasket(product.Id)">To Basket</a>' +
        '</li>' +
        '<li class="shop_btn">' +
        '<a id="MainContent_Items_Read_more_0" href="ProductDetail.aspx?productID=1">Read more</a>' +
        '</li>' +
        '<div class="clear"> </div>' +
        '</ul>' +
        '</div>' +
        '</div>';

    $container.isotope()
        .append(elem)
        .isotope('appended', elem)
        .isotope('layout');

}