这是展示广告或为自己的内容添加促销块的完美方式。它还为您的布局提供了一个有趣的视觉突破，从重复的网格中脱颖而出。

为了更好地理解我们将要构建的内容，有一个随附的演示。但是，由于此演示使用一些PHP代码，因此需要服务器才能运行。

可以从此 GitHub 存储库下载项目文件()。

通过服务器运行演示，请注意两件事：

嵌入式横幅重新加载页面时，横幅图像会发生变化。了解布局

在前面的教程中，我们使用自己的标记重新创建了一个这样的教程列表。

标记

我们使用简单的HTML来构建结构。自动化并将数据内容存储在 PHP 数组中。在这里，我们将使用 PHP，但无论语言或 CMS/框架如何，逻辑都将保持不变。我们应该遍历源代码并检索帖子。

我们的数据内容格式如下所示：

$articles      = array(  array(    'title'      => 'Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript',    'image'      => ';,    'link'       => ';,    'categories' => array(      'CSS',      'JavaScript',    ),  ),  array(    'title'      => 'How to Build a Static Portfolio Page With CSS & JavaScript',    'image'      => ';,    'link'       => ';,    'categories' => array(      'CSS',      'JavaScript',    ),  ),      // more articles here );

这是我们的循环逻辑：

<?php if ( ! empty( $articles ) ) : ?>  <div class="container">    <ol class="posts">      <?php foreach ( $articles as $key => $article ) : ?>        <li class="post">          <article>            <figure>              <a href="<?php echo $article['link']; ?>" target="_blank">                <img width="300" height="208" src="<?php echo $article['image']; ?>" alt="<?php echo $article['title']; ?>">              </a>              <figcaption>                <ol class="post-categories">                  <?php foreach ( $article['categories'] as $cat ) : ?>                    <li>                      <a href="">                        <?php echo $cat; ?>                      </a>                    </li>                  <?php endforeach; ?>                </ol>                <h2 class="post-title">                  <a href="<?php echo $article['link']; ?>" target="_blank">                    <?php echo $article['title']; ?>                  </a>                </h2>              </figcaption>            </figure>          </article>        </li>      <?php endforeach; ?>    </ol>  </div><?php endif; ?>

如前所述，根据你将要使用的语言或CMS，情况会发生变化。例如，WordPress有一个用于所有主要查询的内置循环。

<!-- Start the Loop. --><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>   <!-- Add post info using WP built-in functions --><?php endwhile; else : ?>  <!-- The very first "if" tested to see if there were any Posts to -->  <!-- display. This "else" part tells what do if there weren't any. -->  <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>  <!-- REALLY stop The Loop. --><?php endif; ?>

除了标记之外，我们还将保留上一教程中的大多数样式。我们只会进行一些更改以使布局响应。

以下是所有样式：

:root {  --black: #3a3a3a;  --white: #fff;  --green: #49b293;}* {  margin: 0;  padding: 0;}img {  display: block;  max-width: 100%;  height: auto;}ol {  list-style: none;}a {  text-decoration: none;  color: inherit;}body {  margin: 50px 0;  color: var(--black);   font: 1rem/1.3 sans-serif;}.container {  max-width: 1200px;  padding: 0 15px;   margin: 0 auto;}h1 {  text-align: center;  margin-bottom: 2rem;}h1 a {  text-decoration: underline;}.posts {  display: grid;  grid-gap: 1.5rem;}.posts .post {  width: 300px;  margin: 0 auto;    border: 1px solid rgba(0, 0, 0, 0.1);}.posts > li {  background: #fafafa;}.posts .post-title {  font-size: 1.3rem;}.posts .post-title:hover {  text-decoration: underline;}.posts figcaption {  padding: 1rem;}.posts .post-categories {  margin-bottom: 0.75rem;  font-size: 0.75rem;}.posts .post-categories * {  display: inline-block;}.posts .post-categories li {  margin-bottom: 0.2rem;}.posts .post-categories a {  padding: 0.2rem 0.5rem;  border-radius: 1rem;   border: 1px solid;  line-height: normal;  transition: all 0.1s;}.posts .post-categories a:hover {  background: var(--green);  color: var(--white);}@media (min-width: 500px) {  .posts {    grid-template-columns: repeat(2, 1fr);  }  .posts .post {    width: auto;  }}@media (min-width: 600px) {  .posts {    grid-template-columns: repeat(3, 1fr);  }}@media (min-width: 900px) {  .posts {    grid-template-columns: repeat(4, 1fr);  }}

现在让我们假设我们要在网格内放置横幅。在这种情况下，我们只会使用图片横幅，但在您的情况下，您可以插入来自不同来源的广告、轮播、视频或您喜欢的任何其他内容。

我们的横幅必须满足以下要求：

它们应该在每五列之后出现。在我们的例子中，有 12 个帖子，所以我们的网格将包含两个横幅。当然，在您的情况下，您可以拥有更多。在每个页面加载时，它们应该随机出现，这意味着某些横幅不会有任何固定的位置。此外，嵌入的横幅应该是唯一的，这意味着单个横幅不会在同一页面中出现两次。

下面是我们想要生成的布局示例：

如前所述，横幅将随机出现，因此在另一个页面加载时，我们可能会看到不同的横幅，如下所示：

为了实现此行为，我们将使用不同的 PHP 数组函数（、array_diff、array_push）。array_keysarray_rand

让我们记下我们将遵循的步骤：

将所有横幅（来自 Unsplash）存储在数组内，并从该数组中获取密钥。$images初始化数组，我们将在其中添加要添加到网格的每个横幅的键。默认情况下，它将为空。$exclude_images_keys在循环中，我们将检查当前元素的索引是否不为 0 并且能被 5 整除。如果发生这种情况，我们将比较 和 数组。我们将返回它们的唯一值（如果有），并将它们存储在数组中。$images_keys$exclude_images_keys$in_items从数组中获取一个随机密钥。$in_items将此键添加到数组中，以从将来的选择中排除关联的横幅。$exclude_images_keys使用此键选择横幅并将其放置在网格中。

以下是负责此功能的 PHP 代码：

<?php // 1 $images              = array(  'banner1.jpg',  'banner2.jpg',  'banner3.jpg',  'banner4.jpg',  'banner5.jpg',  'banner6.jpg',);$images_keys         = array_keys( $images );$exclude_images_keys = array();foreach ( $articles as $key => $article ) :  // 3   if ( 0 !== $key && 0 === $key % 5 ) :    // 4     $in_items         = array_diff( $images_keys, $exclude_images_keys );    // 5     $random_image_key = array_rand( $in_items );    // 6     array_push( $exclude_images_keys, $random_image_key );    // 7     $random_image = $images[ $random_image_key ];    ?>    <li class="banner">      <img width="800" height="533" src="img/<?php echo $random_image; ?>" alt="banner">    </li>	<?php  endif;  ... endforeach;

以及我们横幅的附加 CSS：

.posts .banner img {  width: 100%;  height: 100%;  object-fit: cover;}  @media (min-width: 900px) {  .posts .banner {    grid-column: span 2;  }}

就是这样，伙计们！我希望你和我一样喜欢这个小练习，它给了你一些关于如何在网格布局中嵌入广告项目的想法。此外，通过以我们在此处介绍的方式使用模运算符 （），您可以创建具有动态模式的多列布局。

与往常一样，非常感谢您的阅读！