Jquery 无法获取正确布局砌体的同位素

我一直在浏览大量优秀的搜索结果，但我不明白为什么同位素布局不起作用。它应该是一个三列的布局，但是曾经是一个简单的壮举，它并没有给我一条直线，尽管它将砖石作为布局模式

每个项目是306px，在控制台中确认这是外径计算，每个项目有10px的填充，排水沟宽度应该正常工作

随机排序很好，只是布局而已

我还确保容器中有足够的宽度空间来容纳这一切

这是我的jquery

function handleTweets(tweets){
var x = tweets.length;
var n = 0;
var element = document.getElementById('social');
var html = '<div class="social-feed">';
while(n < x) {
  html += '<div class="tweet grid-item">' + tweets[n] + '</div>';
  n++;
}
html += '</div>';
element.innerHTML = html;
}

function buildFeed(){
var igs = $('#ig').children('div').addClass('igram grid-item').detach();
igs.appendTo('.social-feed');
$('#ig').remove();

$('.social-feed').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry',
      masonry: {
        columnWidth: 306,
        gutterWidth: 20,
        rowHeight: 196
      },
    sortBy: 'random'
});
}

twitterFetcher.fetch('373174289429577728', 'social-strip', 1, true, false, true, '', false, undefined, false);

twitterFetcher.fetch('373174289429577728', '', 8, true, false, false, '', false, handleTweets, false);

$('#ig').embedagram({
instagram_id: 271712475,
thumb_width: 346,
wrap_tag: 'div',
success: buildFeed,
limit: 2
});

---

就像我上面说的，它们都是直线下降的。不知道为什么。

可以通过将javascript更改为此。。。

$（'.social feed'）。同位素({
itemSelector:“.grid项”，
脏话：“随机”
});
我猜我只是在同位素方面做了太多相互冲突的事情，没有对css进行真正的更改

.social-feed {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
width: 980px;
}
.social-feed div p {
padding: 0;
margin: 0;
}
.social-feed div {
    width: 326px;
    height: 118px;
    margin: 10px;
    background: url(img/strip-bg.png);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    padding: 10px;
    float: left;
    display: inline;
    border-radius: 3px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.social-feed div.igram {
    padding: 0;
    background: transparent;
    width: 346px;
    height: 290px;
    overflow: hidden;
}