我正在为我的学校创建一个投资组合站点，我已经获得了与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>
最佳答案
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');
});
关于javascript - 用Javascript/CSS生成Box Grid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30787568/