如何在网格布局中嵌入随机内容
这是展示广告或为自己的内容添加促销块的完美方式。它还为您的布局提供了一个有趣的视觉突破，从重复的网格中脱颖而出。
为了更好地理解我们将要构建的内容，有一个随附的演示。但是，由于此演示使用一些PHP代码，因此需要服务器才能运行。
可以从此 GitHub 存储库下载项目文件(https://github.com/tutsplus/How-to-Embed-Random-Content-Inside-a-Grid-Layout)。
通过服务器运行演示，请注意两件事： 嵌入式横幅 重新加载页面时，横幅图像会发生变化。 了解布局
在前面的教程中，我们使用自己的标记重新创建了一个这样的教程列表。
标记
我们使用简单的HTML来构建结构。自动化并将数据内容存储在 PHP 数组中。在这里，我们将使用 PHP，但无论语言或 CMS/框架如何，逻辑都将保持不变。我们应该遍历源代码并检索帖子。
我们的数据内容格式如下所示： $articles = array( array( ＂title＂ => ＂Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript＂, ＂image＂ => ＂https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/parallax-pre.jpg＂, ＂link＂ => ＂https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061＂, ＂categories＂ => array( ＂CSS＂, ＂JavaScript＂, ), ), array( ＂title＂ => ＂How to Build a Static Portfolio Page With CSS & JavaScript＂, ＂image＂ => ＂https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/chart-pre.png＂, ＂link＂ => ＂https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933＂, ＂categories＂ => array( ＂CSS＂, ＂JavaScript＂, ), ), // more articles here );
这是我们的循环逻辑： <?php if ( ! empty( $articles ) ) : ?> <?php foreach ( $articles as $key => $article ) : ?> - ＂ target=＂_blank＂>
＂> <?php foreach ( $article[＂categories＂] as $cat ) : ?> - <?php echo $cat; ?>
<?php endforeach; ?>
＂ target=＂_blank＂> <?php echo $article[＂title＂]; ?>
<?php endforeach; ?>
<?php endif; ?>
如前所述，根据你将要使用的语言或CMS，情况会发生变化。例如，WordPress有一个用于所有主要查询的 内置循环。 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; else : ?> <?php esc_html_e( ＂Sorry, no posts matched your criteria.＂ ); ?> <?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 ]; ?>
<?php endif; ... endforeach;
以及我们横幅的附加 CSS： .posts .banner img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .posts .banner { grid-column: span 2; } }结论
就是这样，伙计们！我希望你和我一样喜欢这个小练习，它给了你一些关于如何在网格布局中嵌入广告项目的想法。此外，通过以我们在此处介绍的方式使用模运算符 （），您可以创建具有动态模式的多列布局。
与往常一样，非常感谢您的阅读！
＂> 
