无法获得同位素以正确布置砌体答案

【问题标题】：Cannot get isotope to layout masonry correctly无法获得同位素以正确布置砌体
【发布时间】：2013-09-06 03:04:33
【问题描述】：

通过大量的搜索结果，我无法弄清楚为什么这种同位素布局不起作用。它应该是一个三列布局，但曾经很容易做到的事情并没有给我一条直线，尽管专门将砌体设置为布局模式。

每个项目都是 306px，在控制台中确认这是 outerWidth 计算，每个项目都有 10px 的填充，并且 gutter 宽度应该可以正常工作。

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

我还确保容器中有足够的宽度空间来容纳所有物品。

这是我的 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
});

我在调用 isotope 语句之前检查了 div 的宽度，只是为了确保它们在页面上并且实际上也提供了有效的宽度属性。

我只是在站点中使用常用的 css 作为同位素，但这是我在项目中使用的特定 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;
}

就像我上面所说的，它们都直接向下排列。不知道为什么。

【问题讨论】：

标签： jquery layout jquery-masonry jquery-isotope

【解决方案1】：

能够通过将javascript更改为此... $('.social-feed').isotope({ itemSelector: '.grid-item', sortBy: 'random' }); 猜猜我只是在相互冲突的同位素中做的太多，对 css 没有真正的改变

【讨论】：