Bootstrap Test

Bootstrap test setup. Responsive with images.

by panchroma

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<div class="container">

<div id="posts" class="row">
    
        <div class="post span3"> from http://www.deanclatworthy.com/?p=229
        
        </div>
        <div class="post span3 tall">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis vestibulum felis. In augue erat, vestibulum faucibus auctor placerat, rutrum in est. Sed tempus, lectus eu porta condimentum, mauris enim pretium lorem, quis eleifend dolor tellus vitae tortor. Nam at odio vehicula est molestie feugiat eget et dui. Vestibulum tempor faucibus fringilla. Vestibulum vitae felis risus. Fusce tortor enim, tincidunt eget sagittis vitae, blandit a lacus. Nunc porta massa in nulla elementum porta.

        
        </div>
        <div class="post span6"><img src="https://dl.dropbox.com/u/2665617/tamatea-car.jpg" class="pull-right" />
        
        </div>
        <div class="post span6 tall">
        
        </div>
        <div class="post span3 tall">
        
        </div>
        <div class="post span3">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span3">
        
        </div>
        <div class="post span6 tall">
        
        </div>
        <div class="post span6">
        
        </div>
        <div class="post span3">
        
        </div>        
        
    </div>

</div>

CSS

#posts .post { min-height: 100px; background: cyan; margin-bottom: 20px; }
#posts .tall { height: 200px; }

JavaScript

$(document).ready(function () {
   
    $("#posts").masonry({
        itemSelector: '.post',
        isAnimated: true,
        columnWidth: function( containerWidth ) {
        
            var width = $(window).width();
            var col = 300;
            

            if(width < 1200 && width >= 980) {
                col = 240;
            }
            else if(width < 980 && width >= 768) {
                col = 186;
            }
        
            return col;
          }
    });
    
});