使用Javascript / CSS生成Box网格

Question

我正在为我的学校创建一个投资组合网站，我已经与PHP MySQL进行了动态数据库交互，但现在我想让它更有点发烧友。我只是不知道如何使用我的代码轻松完成这项工作。或者，如果有一个好的插件用于获得这种结果：

我真的希望这个盒子网格带有图像，当你将鼠标悬停在图像上时，你可以看到标题和子标题，所有的盒子也必须是相同的大小。

这是我现在的代码，我想在这个框格子中设置样式。

<article>
    <div class="image_small"><?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $image ).'" width="250" height="200" />';?></div>
     <div class="text_small"><h3><?php echo $title?></h3><br>
     <p><?php echo substr($body, 0, $lastspace)?></p>
     </div>
    <div class="vak"><h4>Vak: <?php echo $category?></h4></div>
    <div class="more_button"><?php echo "<a href='post.php?id=$post_id'><img src='images/more-button.png'  width='70' height='30' border='0'></a>"?></div>

   </article>

Answer 1

One method is using JQuery:
Include dependencies
Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.

HTML Structure
Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Grid it up!
Gridster accepts one argument, a hash of with configuration options.
$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

});

To get hold of the API object, use the jQuery data method like so:
$(function(){ //DOM Ready

   var gridster = $(".gridster ul").gridster().data('gridster');

});