如何制作这样的砌体网格？

Question

我的项目有Macy.js，它有4列，但我想在流程中创建一个右浮动div。我使用mysql查询来输出博客文章。

现在我有这样的代码：

function assignIdAndForAttribute()
{
    var redTable= document.getElementById("redTable");
    var redInputTag = redTable.getElementsByTagName("input");
    var redLabelTag = redTable.getElementsByTagName("label");
    //<![CDATA[
    for (var i = 0; i < tableError.length; i++) {
       redInputTag [i].setAttribute("id", 'toggleRed' + i);
       redLabelTag [i].setAttribute("for", 'toggleRed' + i);
    }
    //]]>

    var yellowTable = document.getElementById("detailedTable");
    var yellowInputTag = yellowTable.getElementsByTagName("input");
    var yellowLabelTag = yellowTable.getElementsByTagName("label");
    //<![CDATA[
    for (var i = 0; i < tableWarning.length; i++) {
       yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
       yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
    }
    //]]>
}

如何使用js，css，php或其他任何方式实现如下图所示？