使用jQuery或CSS的Mosaic Gallery效果?

时间:2016-01-26 14:24:49

标签: javascript jquery html css

我希望达到Mosaic(?)效果,但我不确定从哪里开始。我可以使用插件吗?

这是我目前的代码: https://jsfiddle.net/z3bhh9gj/

<section id="intro">
        <div class="container">
            <div class="row">
                <div class="item">
                    <img src="http://placehold.it/300x620">
                </div>
                <div class="item">
                    <img src="http://placehold.it/620x300">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x300">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x620">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x300">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x300">
                </div>
            </div>
        </div>
    </section>

以下是最终结果: enter image description here

我应该为此考虑砌体或同位素吗?

感谢任何帮助: - )

2 个答案:

答案 0 :(得分:0)

你有很好的插件

  1. GridALicious
  2. Masonry

答案 1 :(得分:-1)

Masonry是一种布局,Isotope是一个提供砌体布局和过滤等功能的插件。有一个砌体插件:

Masonry

Isotope使用此库。

Isotope