如何在网格布局中嵌入随机内容

　　这是展示广告或为自己的内容添加促销块的完美方式。它还为您的布局提供了一个有趣的视觉突破，从重复的网格中脱颖而出。
　　为了更好地理解我们将要构建的内容，有一个随附的演示。但是，由于此演示使用一些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 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;   } }结论
　　就是这样，伙计们！我希望你和我一样喜欢这个小练习，它给了你一些关于如何在网格布局中嵌入广告项目的想法。此外，通过以我们在此处介绍的方式使用模运算符 （），您可以创建具有动态模式的多列布局。
　　与往常一样，非常感谢您的阅读！