Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~

今儿要实现的是：Photo Album 瀑布流相册

本期将和小伙伴们探讨：

  • √ 通过简略几步，带大家用 HTML + CSS + JavaScript 速通瀑布流画册

本实例的代码地址：

  • Github - all for one
  • 码上掘金 - 05 - Photo Album 瀑布流相册

本实例系列整体成果可见：https://liangjunrong.github.io/

当然，jsliang 还贴心筹备了视频教程，手把手带你逐渐实现：

  • 同步视频

一 前言

本 CSS 系列文章：

  1. 主推学以致用。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
  2. 主推纯 CSS。尽可能应用 HTML + CSS 实现学习目标，但依然有 “一小部分” 性能须要用到 JavaScript 常识，适宜新人学习 + 大佬温习。

如果文章在一些细节上没写分明或者误导读者，欢送评论/吐槽/批评，你的关注和点赞是我继续更新的能源，谢谢大家 ❤

  • 更多常识分享文章可见：jsliang 的文档库

二 本期知识点

2.1 @media

对于 @media，小伙伴们在 MDN 上能够看到介绍：

  • @media 规定可用于基于一个或多个媒体查问的后果来利用样式表的一部分。

什么意思呢？大略就是对于一个元素，你能够指定它在不同设施下的展现。

例如：

<h1>jsliang 的实例系列</h1>
h1 {  font-size: 36px;  color: deepskyblue;}@media screen and (max-width: 1000px) {  h1 {    font-size: 24px;  }}

这 2 段代码，即示意对于 <h1> 元素，在 1000+ px 上，体现为 36px 的字体大小，而在 1000 px 下，则为 24px 大小。

通过这样 @media，小伙伴们也能够联想下，本次须要实现的性能，在不同分辨率下如何尝试实际进去。

2.2 filter

对于 filter，小伙伴们在 MDN 上能够看到介绍：

  • CSS 属性 filter 将含糊或色彩偏移等图形成果利用于元素。滤镜通常用于调整图像、背景和边框的渲染。

咱们很容易就联想到一些非凡日子，很多网站的置灰成果，有些正是用上了 filter 属性。

.gray {  filter: grayscale(100%);  filter: gray;}

当然，本文也会通过 filter 来实现图片遮罩成果。

三 实现步骤

OK，话不多说，咱们开始实现本实例，让咱们开始吧！

3.1 实现一个画框

对于下面这种成果，在小伙伴们看来，想必是曾经游刃有余：

index.html
<div class="photo-container">  <div class="show">失常显示</div></div>

在这里，.photo-container 是红色的，而 .show 是外部的蓝色框。

index.css
/* 重置款式 Start */body, html { margin: 0; padding: 0; }body {  display: flex;  justify-content: center;  color: #fff;  font-size: 24px;}/* 重置款式 End */.photo-container {  width: 400px;  height: 400px;  background: red;  padding: 10px;  position: relative;}.show {  width: 100%;  height: 100%;  background: deepskyblue;}

3.2 实现画框 hover 出弹窗

在鼠标 hover 的时候，能进去一个弹窗，遮挡住 .show 这个元素，并且左下角有一个 jsliang 的小文本，想必也很简略：

index.html
<div class="photo-container">  <div class="show">失常显示</div>+  <div class="hover-show">+    hover 显示+    <div class="author">+      <span>jsliang</span>+    </div>+  </div></div>

CSS 略微补充一下：

index.css
/* 大框 hover 后显示成果 */.photo-container:hover .hover-show {  display: block;}.hover-show {  display: none;  width: calc(100% - 20px);  height: calc(100% - 20px);  background: orange;  position: absolute;  top: 10px;  left: 10px;}/* 左下角作者 */.author {  position: absolute;  left: 0;  bottom: 0;  color: deepskyblue;  font-size: 18px;  background: papayawhip;  padding: 10px;  cursor: pointer;}

3.3 实现画框 hover 的弹窗再 hover 出作者详情

再下来就是在鼠标 hover 到作者的时候，能开展上边的「作者 hover 显示」弹窗，这也不难：

index.html
<div class="photo-container"> <div class="show">失常显示</div> <div class="hover-show">   hover 显示   <div class="author">     <span>jsliang</span>+     <div class="author-hover-show">+       作者 hover 显示+     </div>   </div> </div></div>

同样也是补充一点 CSS：

index.css
/* 作者 hover 出作者详情 */.author:hover .author-hover-show {  display: block;}.author-hover-show {  display: none;  position: absolute;  width: 200px;  height: 100px;  background: blue;  bottom: 40px;  left: 0px;}

3.4 Copy 弹窗，通过 JS 实现瀑布流

上面压力来到 JS 这边，咱们如何「批量」制作响应式瀑布流呢？

这里咱们挑了「瀑布流的 N 种实现形式」之一来实现：

index.html
<body>- <!-- 删除了很多内容 -->+  <div class="photo-album"></div>+  <script src="./index.js"></script></body>
index.js
window.onload = () => {  // 伪装后盾申请接口给到的图片数据  const imgList = Array.from(Array(100), (item, index) => index + 1);  const renderDOM = document.querySelector('.photo-album');  let prevMode = 1;  // func: 滚动查找元素并将 String 累计起来，最终渲染到 renderDOM 节点上  const reduceDOM = (limit) => {    // 生成 limit 条字符串    const htmlString = Array.from(Array(limit), () => '<div class="photo-list">');    // 遍历并将 <img/> 增加到每一列上    imgList.forEach((item, index) => {      const surplus = index % limit;      if (surplus < limit) {        htmlString[surplus] += `<div class="photo-container">  <div class="show">失常显示 ${item}</div>  <div class="hover-show">    hover 显示    <div class="author">      <span>jsliang</span>      <div class="author-hover-show">        作者 hover 显示      </div>    </div>  </div></div>`;      }    });    // 结尾设置 String    for (let i = 0; i < limit; i++) {      htmlString[i] += '</div>';    }    // 渲染到 HTML 上。记得解决下数组，要不然会产生逗号    renderDOM.innerHTML = htmlString.join('');  };  // func: 重排节点  const resize = () => {    const width = window.innerWidth;    // 超过 1000px 显示 3 列，否则显示 2 列    if (width >= 1000 && prevMode !== 3) {      prevMode = 3;      reduceDOM(prevMode);    } else if (width < 1000 && prevMode !== 2) {      prevMode = 2;      reduceDOM(prevMode);    }  };    // 1、每次进来先执行一遍  resize();  // 2、每次拖拽，判断是否须要从新渲染  window.onresize = () => {    resize();  };};

接着咱们略微补充一点 CSS 即可：

index.css
/* 相册主容器 */.photo-album {  display: flex;  width: 100%;}/* 相册列表 */.photo-list {  /* 防挤压 */  flex-shrink: 0;  width: calc(33% - 20px);  margin-left: 20px;}/* 自适应 */@media screen and (max-width: 1000px) {  .photo-list {    width: calc(50% - 30px);  }}

这样，咱们就实现了瀑布流相册的雏形。

3.5 补充「亿」点点细节

jsliang 我想学真正的技术，别拿小框框搪塞我！

好的好的，麻瓜让道，魔法来了~

其实就是照着「Pexels」补充 CSS 细节：

OK，这样咱们本次的 CSS 之旅就实现啦！

本实例的代码地址：

  • Github - all for one
  • 码上掘金 - 05 - Photo Album 瀑布流相册

本实例系列整体成果可见：https://liangjunrong.github.io/

当然，jsliang 还贴心筹备了视频教程，手把手带你逐渐实现：

  • 同步视频

四 参考文献

  • Pexels - 才华横溢的摄影作者在这里收费分享最精彩的素材图片和视频
  • CSS 实现三角图标

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞/点 Star。

如果小伙伴须要分割 jsliang：

  • Github
  • 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名-非商业性应用-雷同形式共享 4.0 国内 许可协定 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。