jquery test03

masonry test

by dirkk0

HTML

<script src="http://desandro.com/_base/js/jquery.masonry.min.js"></script>
<button>button</button>
<br>

<div class="container">
    <div class="wrap" id="grid">
        
        <div class="box col3" data-size="380,380">
            <h5>1</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
            <div class="expandable">
                
                <br><br>
                Sit amet mi ullamcorper vehicula.
                <br>
                <div style="float:right; width: 150px;">Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</div>
            </div>
        </div>
        
        
        
        <div class="box col1" data-size="180,380">
            <h5>2</h5>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
        </div>
        
        <div class="box col2">
            <h5>3</h5>
            <p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
        </div>
        
        <div class="box col1" data-size="280,280">
            <h5>4</h5>
            <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit.  Aenean ac mauris non ligula.    </p>
        </div>
        
        <div class="box col1">
            <h5>5</h5>
            <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
        </div>
        
        <div class="box col1">
            <h5>6</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
        </div>
        
        <div class="box col1">
            <h5>7</h5>
            <p>Cadipiscing in, lacinia...

CSS

.container { width: 520px; }
.box { color: #222 }
.wrap {
    background: #FFF;
    border: 0px solid #456;
    padding: 10px;
    margin-bottom: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 11px;
    float: left;
    overflow: hidden;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

.box h5 {
    color:#FFFFFF;
    float:right;
    font-size:25px;
    font-weight:bold;
    padding: 3px;
    margin: 0 2px;
}

.expandable {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('#grid').masonry({
        columnWidth: 100,
        itemSelector: '.box'
    });
    $("#knopp", ".demo").button();
    $("#knopp, button").click(function() {
        $("#grid").prepend("<div class='box col1' data-size=380,380'>aaa</div>");
        $('#grid').masonry({
            columnWidth: 100,
            itemSelector: '.box'
        });

    });

});