javascript - 使用 Javascript/CSS 生成方框网格

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');

});