小武阁

 最近在浏览一些图片网站，看到一些比较不错的布局，例如视觉中国下吧，Mark之等，展示图片的布局很有意思，在不等高的情况下能均匀排列，用CSS试了一下，不能实现，查看源码发现用JQ实现，才找到了jQuery Masonry这个布局插件。

Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，让你的网页看上去更加的整齐、自然、漂亮！原理是通过计算宽高，定位到相应位置。

从上图相信已经看到效果了，其实代码页很简单。

<div id="container">
<div class="box"><img src="images/1.jpg" alt="" /></div>
<div class="box"><img src="images/2.jpg" alt="" /></div>
<div class="box"><img src="images/3.jpg" alt="" /></div>
<div class="box"><img src="images/4.jpg" alt="" /> </div>
</div>

<script src="http://masonry.desandro.com/js/jquery-1.6.2.min.js"></script>
<script src="http:/masonry.desandro.com/jquery.masonry.min.js"></script>
<script>
  $(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box'
      });
    });
  });
</script>

想达到更多效果，可参考作者网站：http://desandro.com/demo/masonry/docs/