たくさんの優れた検索を調べてきましたが、なぜこの同位体レイアウトが機能しないのかわかりません. これは 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;
}
上で述べたように、それらはすべて一列に並んでいます。理由がわからない。