定位不同大小的浮动元素

Question

我需要展示大量不同尺寸的元素（实际上，两种尺寸 - 小和大）我需要它看起来像http://i.imgur.com/mY8gb5Y.jpg

HTML

<ul class="instagram-images-list">
                            <li class="big">
                                <a href="#">
                                    <img src="non-functional-img/img_3.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="big">
                                <a href="#">
                                    <img src="non-functional-img/img_3.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="big">
                                <a href="#">
                                    <img src="non-functional-img/img_3.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>

                            <li class="small">
                                <a href="#">
                                    <img src="non-functional-img/img_1.jpg" alt="" title="">
                                </a>
                            </li>
                        </ul>

CSS

.instagram-images-list {
  width: 900px;
  margin: 10px auto 0 auto;
  overflow: hidden;
  background-color: transparent;
  background-image: url('../img/bg_dots_8.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.instagram-images-list > li {
  display: table;
  float: left;
  margin: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 8px solid #f4e9d9;
}

.instagram-images-list > li a {
  display: table-cell;
  vertical-align: middle;
}

.instagram-images-list > li a img {
  display: block;
  margin: 0 auto;
}

.instagram-images-list > li.small {
  width: 140px;
  height: 140px;
}

.instagram-images-list > li.small a img {
  max-width: 124px;
  max-height: 124px;
}

.instagram-images-list > li.big {
  width: 320px;
  height: 320px;
}

.instagram-images-list > li.big a img {
  max-width: 304px;
  max-height: 304px;
}

http://jsfiddle.net/8q61wpz9/2/

但是像http://i.imgur.com/GxqIzd4.jpg之类的元素之间存在gups。 有没有办法以我需要的方式展示元素？也许，它有一些jQuery插件吗？

Answer 1

实际上有一个jquery插件，最经常使用的是Masonry：Masonry