砖石布局

简介

在本实验中，我们将探索砖石布局的概念，并学习如何创建一个视觉上吸引人的网格状结构，非常适合展示图像。通过使用CSS和HTML，我们将构建一个响应式的砖石风格布局，具有灵活的列数和列宽，能够适应各种屏幕尺寸。本实验将为你提供实践经验，帮助你为网页创建一个优雅且实用的布局。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/CSSPreprocessorsGroup -.-> css/variables("Variables") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/margin_and_padding -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/width_and_height -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/display_property -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/pseudo_classes -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/media_queries -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/mobile_first_design -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/variables -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} css/mixins -.-> lab-35224{{"使用 CSS 实现响应式砖石布局"}} end

虚拟机中已经提供了index.html和style.css。

要创建砖石风格的布局，使用.masonry-container作为主容器，并添加.masonry-columns作为内部容器，将.masonry-brick元素放置在其中。该布局由相互堆叠的“砖块”组成，完美契合。垂直布局的width和水平布局的height可以固定。

为确保布局正常流动，对.masonry-brick元素应用display: block。使用:first-child伪元素选择器为第一个元素应用不同的margin，以考虑其定位。

为了实现更大的灵活性和响应性，使用CSS变量和媒体查询。.masonry-container有用于列数和间距的CSS变量。列数由媒体查询控制，这些媒体查询为不同的屏幕尺寸指定不同的列数和宽度。

<div class="masonry-container">
  <div class="masonry-columns">
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1016/384/256"
      alt="An image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1025/495/330"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1024/192/128"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1028/518/345"
      alt="One more image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1035/585/390"
      alt="And another one"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1074/384/216"
      alt="Last one"
    />
  </div>
</div>

.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}

请点击右下角的“Go Live”在端口8080上运行网络服务。然后，你可以刷新Web 8080标签页来预览网页。

总结

恭喜你！你已经完成了砖石布局实验。你可以在LabEx中练习更多实验来提升你的技能。