从下往上生成图像墙

Question

我正在尝试构建一个虚拟图像墙，用户可以在墙上添加新砖。到目前为止，我已经使用了一个浮动来使所有的图像换行，但问题是它将从上到下构建，当添加新砖时，它会在底部而不是顶部添加另一块砖。

这就是我现在所拥有的，但它的方法是错误的，它需要被倒置，因此砖0位于底部，如果我添加砖31，它将被添加到顶部以创建堆栈。

在这种情况下，我不认为代码很重要，但现在就是。

<div id="wallwrapper">
<?php 
$brickrowclass = "";

for($i=0; $i <= 30; $i++)
{

    if($i % 10 == 0) 
    {
        if($brickrowclass == "std") $brickrowclass = "indent";
        else $brickrowclass = "std";
        echo "<div class='brickrow row{$brickrowclass}'>";
    }

    ?>
    <div class="brick">
    <span class="bricktitle">Brick <?php echo $i;?></span>
    </div>
    <?php   

    if($i % 10 == 0) echo "</div>";
}
?>
</div>
<style>
.brick{width:90px;height:40px;background-color: #AB4E4E;margin:1px;float:left;}
.brickrow{clear:both;}
.rowindent{margin-left:45px;}
#wallwrapper{width:1024px;}
</style>

Answer 1

不是在PHP中，但我在javascript中创建了类似的东西。看这里： http://jsfiddle.net/a5hahvkd/

var numBricks = 31;
var bricksPerRow = 11;
var div;
for (var i = 0; i < numBricks; i++)
{
    if (i % bricksPerRow == 0)
    {
        div = $("<div/>").css('clear', 'both');
        $("#wallwrapper").prepend(div);
    }
    $(div).append('<div class="brick">Brick' + (i+1) + '</span></div>');
}

由于“墙”和砖块的宽度已知，您可以计算一行中有多少块砖。当行中没有足够的位置时，在顶部添加新的div。

使用'numBricks'号码播放并运行它。我想这就是你想要的。