jquery test05

empty boxes

by dirkk0

HTML

<script src="http://desandro.com/_base/js/jquery.masonry.min.js"></script>
    <div id="demo">
      
      <ul id="filtering-nav">
        <li><a class="gray" href="#gray">Gray</a></li>
        <li><a class="red" href="#red">Red</a></li>
        <li><a class="black" href="#black">Black</a></li>
          <li><a class="all" href="#all">All</a></li>
      </ul>
      

      <div class="wrap">

        <div class="box col2 gray">
                    <div class="dstyle1"></div>
        </div>

        <div class="box col1 red">
                    <div class="dstyle1"></div>
         </div>

        <div class="box col1 black">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box gray">
                              <div class="dstyle1"></div>
 
        </div>
        <div class="box col1 red">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col1 gray">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col2 gray">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col1 black">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col2 gray">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col3 black">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col1 red">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col2 gray">
                              <div class="dstyle1"></div>
 
        </div>
        <div class="box col2 black">
                             <div class="dstyle1"></div>
 
        </div>

        <div class="box col1 gray">
                              <div class="dstyle1"></div>
 
        </div>

        <div class="box col1 black">
                         ...

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


.dstyle1
{
    width: 150px;
    height: 100px;
}


.box.black,
#filtering-nav .black {
  background-color: #111;
  color: #FFF;
}

.box.red,
#filtering-nav .red {
  background-color: #D26;
  color: #FFF;
}


#filtering-nav .all { background-color: #FFF;}

#filtering-nav {
  padding: 0;
  margin: 2em 0;
}

JavaScript

$(document).ready(function() {
var
  speed = 1000,  // animation speed
  $wall = $('#demo').find('.wrap')
;

$wall.masonry({
  columnWidth: 100, 
  // only apply masonry layout to visible elements
  itemSelector: '.box:not(.invis)',
  animate: true,
  animationOptions: {
    duration: speed,
    queue: false
  }
});

$('#filtering-nav a').click(function(){
  var colorClass = '.' + $(this).attr('class');

  if(colorClass=='.all') {
    // show all hidden boxes
    $wall.children('.invis')
      .toggleClass('invis').fadeIn(speed);
  } else {  
    // hide visible boxes 
    $wall.children().not(colorClass).not('.invis')
      .toggleClass('invis').fadeOut(speed);
    // show hidden boxes
    $wall.children(colorClass+'.invis')
      .toggleClass('invis').fadeIn(speed);
  }
  $wall.masonry();

  return false;
});
});