具有随机图像大小和响应的网格

Question

我对PHP和HTML知之甚少，所以我需要一些帮助。

我正在尝试通过从帖子中获取图片，更改其大小并将其添加到页面来创建我的论坛主页（门）网格。例如：

无论如何，我的代码是：

{else}
<?php $t= 0;?>
<table class="grid" border="0" width="100%" cellpadding="0" style="border-collapse: collapse" align="center">

<tr class="row">

{Des::while}{LastNews_subjectList}
<?php
if ($PowerBB->_CONF['info_row']['portal_columns'] == '1' )
{
$columns_News = "3";
}
else
{
$columns_News = "2";
}
if($t== $columns_News){
$t=0;
echo "</tr><tr>";
}?>
<td class="post-position" valign="top">
<table class="cell" border="1" width="100" class="border" cellpadding="0" style="border-collapse: collapse" align="center">
	<tr>
		<td class="rowthumb" valign="top">

<a href="index.php?page=topic&amp;show=1&amp;id={$LastNews_subjectList['id']}" title="<?php echo $title;?>">
<?php
$x = 1;

$images = array();
$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'] = stripslashes($PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text']);
preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'], $images);
foreach ($images[2] as $src)
  {
	if($src)
	 {
     echo '<img border="0" width="200" height="200" src="'.$src.'" alt="'.$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'].'">';
	 }

   	 break;
 }
  if(!preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'], $images))
	 {
	  echo '<img border="0" width="200" height="200" src="look/portal/images/traffic_cone.png" alt="'.$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'].'">';
	 }

?>
</a>
		</td>
	</tr>
	<tr>
		<td class="cell-title" valign="top">

<?php
$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'] = $PowerBB->Powerparse->censor_words($PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title']);
$title = $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'];
$num = "20";
$title = $PowerBB->functions->words_count($title,$num);?>
<a href="index.php?page=topic&amp;show=1&amp;id={$LastNews_subjectList['id']}" title="<?php echo $title;?>"><?php echo $title;?></a>
	<br />
<a href="index.php?page=topic&amp;show=1&amp;id={$LastNews_subjectList['id']}" title="Read More">
<div id="read_more_button">
{$lang['SubjectVisitor']}:
 ({$LastNews_subjectList['visitor']})
              &nbsp;{$lang['usercp_reputations']}:
  ({$LastNews_subjectList['rating']})
</div>
</a>
		</td>
		</tr>
		</table> <br />
</td>
<?php $t= $t+1;?>
{/Des::while}
 </tr>
 </table>

{if {$PagerLastNews}}
<table border="1" width="100%" cellpadding="0" style="border-collapse: collapse"><tr>
<tr>
<td class="row3">
<span class="r-right">
{$PagerLastNews}
</span>
		</td>
	</tr>
</table>

那我该怎么办？我曾多次尝试并玩过但我不能这样做，所以我希望我能在这里找到答案。

提前致谢！再见。

Answer 1

不要使用表格。例如，如果要达到作为图像附加的布局。 我不知道你是如何收集图像的，但当然你需要它们。 这个库可以帮助你解决网格问题。我用过，所以我知道。它应该会帮助你。它也有例子，如何为您的网站实现它。 Masonry - Cascading Grid Layout library

由于评论......

您可以在PHP数组中获取图像。打印出来。结果应该是这样的：

    <ul class="js-masonry" id="gallery-container">

<li class="grid-sizer"></li>

    <li class="item">
    <img alt="Test title 1" src="/cache/b/6/9/f/c/b69fcffb670eb78227c9f407bf7fcc4db94f4c13.jpeg" class="img-responsive">
    </li>

    <li class="item">
    <img alt="Test title 23" src="/cache/c/1/f/0/0/c1f0045723688ac91a92ac9b49ea13c00bbb1683.jpeg" class="img-responsive">
    </li>

    <li class="item">
    <img alt="Test title 2" src="/cache/5/1/7/1/a/5171a4e0264f19486a8033fffcf8e1a0e62d0587.jpeg" class="img-responsive">
    </li>

    </ul>

您下载了js库。包括它： （或者使用CDN，因为我在这里使用开发...）

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js" type="text/javascript"></script>

然后在页面下载后运行脚本

<script type="text/javascript">
$(document).ready(function() {

    var $container = $('#gallery-container').masonry();
    $container.imagesLoaded( function() {
        $container.masonry(
                { 
                    "columnWidth": ".grid-sizer", 
                    "itemSelector": ".item", 
                    "gutter":10
                });
    });

});
</script>

如您所见，我也使用了imagesLoaded库。 imagesLoaded