0

Been looking through tons of good searches and I just can't figure out why this isotope layout won't work. It's supposed to be a three column layout, but what once was an easy feat is not giving me just a straight line down despite setting masonry as the layout mode specifically.

Each item is 306px, confirming in the console that this is the outerWidth calculation, and each item has 10px of padding and the gutter width should be working just fine.

The random sorting works just fine, it's just the layout.

I also made sure there was plenty of width room in the container to hold it all.

Here is my 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
});

I've checked the width of the divs right before calling the isotope statement just to ensure that they were on the page and actually giving a valid width attribute as well.

I'm just using the usual css for isotope from the site but here is the specific css I'm using for my project...

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

Like I stated above, they all just go in a line straight down. Not sure why.

4

1 回答 1

0

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

于 2013-09-03T12:20:37.890 回答