我有一个网站,我建立了一个显示照片的功能。
问题是,当我用这个PHP函数显示一个图库时…
<?php
function gallery_1()
{
$picture_ids = array( 1,10,100,101,102,103,
104,105,106,107,108,109,
11,110,111,112,113,114,
115,116,117,118,119,12,
120,121,122,123,124,125,
126,127,128,129,13,130,
131,132,133,134,135,136,
137,138,139,14,140,141,
142,143,144,145,146,147,
148,149,15,150,151,152,
153,154,155,156,157,158,
159,16,160,161,162,163,
164,165,166,167,168,169,
17,170,171,172,173,174,
175,176,178,18,19,2,
20,21,22,23,28,29,
3,30,31,32,33,34,
35,36,37,38,39,4,
40,41,42,43,44,45,
46,47,48,49,5,50,
51,6,69,7,8,86,
87,88,89,9,90,91,
92,93,94,95,96,97,
98,99);
$n = 6; // number of pictures in each row
echo '<div class="row">' . PHP_EOL;
for ($i = 0; $i < count($picture_ids); $i++)
{
// start a new row after each $n pictures
if (($i > 0) && ($i % $n === 0))
{
echo '</div>' . PHP_EOL;
echo '<div class="row">' . PHP_EOL;
}
echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . PHP_EOL;
echo '</article>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;
}
?>
…gallery with PHP
但是如果我在HTML中编写相同的代码,就像这样…
<div class="row">
<article class="6u 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/1.jpg" class="image fit thumb"><img src="images/thumbs_large/1.jpg" alt="" /></a>
</article>
<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/10.jpg" class="image fit thumb"><img src="images/thumbs_large/10.jpg" alt="" /></a>
</article>
<article class="6u 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/100.jpg" class="image fit thumb"><img src="images/thumbs_large/100.jpg" alt="" /></a>
</article>
<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/101.jpg" class="image fit thumb"><img src="images/thumbs_large/101.jpg" alt="" /></a>
</article>
<article class="6u 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/102.jpg" class="image fit thumb"><img src="images/thumbs_large/102.jpg" alt="" /></a>
</article>
<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">
<a href="images/originals/103.jpg" class="image fit thumb"><img src="images/thumbs_large/103.jpg" alt="" /></a>
</article>
</div>
…gallery with HTML
注意到PHP显示时的空白吗?我做错了什么?如果你需要一些其他的代码或想看到它在网站上的实际行动,请告诉我。
谢谢你的帮助。:)
在你的html代码2n文章标签(第2,第4,…)有"6u$"类而不是"6u"。所以如果你像下面这样改变你的php代码,我认为它会像你想要的那样工作。
echo '<div class="row">' . PHP_EOL;
for ($i = 0; $i < count($picture_ids); $i++)
{
// start a new row after each $n pictures
if (($i > 0) && ($i % $n === 0))
{
echo '</div>' . PHP_EOL;
echo '<div class="row">' . PHP_EOL;
}
if($i % 2 === 0)
{
echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
}
else
{
echo '<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">' . PHP_EOL;
}
echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . PHP_EOL;
echo '</article>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;