0

たくさんの優れた検索を調べてきましたが、なぜこの同位体レイアウトが機能しないのかわかりません. これは 3 列のレイアウトであるはずですが、レイアウト モードとして特に組積造を設定しているにもかかわらず、かつては簡単な偉業でしたが、直線を下に表示することはできませんでした。

各アイテムは 306px で、これが outerWidth の計算であることをコンソールで確認し、各アイテムには 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
});

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

上で述べたように、それらはすべて一列に並んでいます。理由がわからない。

4

1 に答える 1