Position floating elements with different sizes

Question

I need to show a lot of element with different sizes (actually, two sizes - small and big) and I need it looks like https://i.sstatic.net/3FI56.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/

But there are gups between elements like https://i.sstatic.net/PBWqQ.jpg. Is there any way to show elements the way I need? Maybe, is there some jQuery plugin for it?

Answer 1

There is in fact a jquery plugin for this, the one most often used is Masonry: Masonry