图像周围的流动图像

Question

以下是我正在处理的网站：metroweb.tk

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

如果有助于提供答案，请随意查看来源。

CODE：

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

查看isotope's masonry layout options。