在图像周围流动图像

Question

所以这是我正在工作的网站： metroweb.tk

我正在尝试制作一个看起来像Windows 8 Metro UI的网站。 但是我遇到了一个问题。 更大的应用程序图标会像笔记和时钟图标一样突出。 我如何做到使图像像在Windows 8 Metro UI中一样在图像周围浮动。 我将使用CSS，JS，jQuery或HTML的任何东西都很好，我只需要一种解决此问题的方法。

随意查看源代码，如果这有助于提供答案。

码：

HTML：

<div id="apps">
        <div id="group1" data-apps="13">
            <div id="name">Apps</div>
            <div id="applist">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
                <img class="app" src="Calendar.png" alt="Calendar" height="120" width="248">
                <img class="app" src="Notes.png" alt="Notes" height="248" width="120">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
                <img class="app" src="Calendar.png" alt="Calendar" height="120" width="248">
            </div>
        </div>
        <div id="group2" data-apps="30">
            <div id="name">Group 2 Apps</div>
            <div id="applist">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
                <img class="app" src="Time.png" alt="Time" height="248" width="248">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
                <img class="app" src="Time.png" alt="Time" height="248" width="248">
                <img class="app" src="AboutMe.png" alt="About Me" height="120" width="120">
            </div>
        </div>
</div>

CSS：

#apps {
    font-family: 'open_sans-light';
    margin: 120px 0px 0px 0px;
}
#name {
    font-size: 20px;
}
#applist {
    margin: 10px 0px 0px 0px;
}
.app {
    padding: 2px;
}

JS：

    var height = $(window).height();
    height -= 220;
        var group1Width = $("#group1").attr("data-apps");
        var group2Width = $("#group2").attr("data-apps");
        if (height <= 255) {
            group1Width = group1Width;
            group2Width = group2Width;
        } else if (height <= 383 && height >= 256) {
            group1Width = Math.ceil(group1Width/2);
            group2Width = Math.ceil(group2Width/2);
        } else if (height <= 511 && height >= 384) {
            group1Width = Math.ceil(group1Width/3);
            group2Width = Math.ceil(group2Width/3);
        } else if (height >= 512) {
            group1Width = Math.ceil(group1Width/4);
            group2Width = Math.ceil(group2Width/4);
        } else {
            alert("An unknown error has been encountered!");
        };
    group1Width = group1Width*(120)+(group1Width*8)+44;
    group2Width = group2Width*(120)+(group2Width*8)+44;
    var appsWidth = group1Width+group2Width+40;
    $("#apps").css("height", height + "px")
              .css("width", appsWidth + "px");
    $("#group1").css("float", "left")
                .css("height", height + "px")
                .css("width", group1Width + "px");
    $("#group2").css("float", "left")
                .css("height", height + "px")
                .css("width", group2Width + "px");

Answer 1

查看同位素的砌体布局选项 。