图片自适应的五种可能

在自适应问题上,图片的自适应可以说是最关键了。

在仿做小红书的过程中,我也遇到了这个问题,小红书作为一个商品展示性的社区,商品图片的自适应是很重要的。在放眼望去都是图片的页面里,一两个变形可能会极大地影响用户的感受。

我在两个地方遇到了图片适应的问题,一个是品牌精选的卡片,对于宽固定,图片高度不规则并且比容器本身要大的情况;还有一个是在做九宫格要求图片宽高一致。

瀑布流实现方案探讨

最近在仿小红书时又遇到了一个问题,就是笔记的瀑布流展示。

我采用的是张鑫旭在博客中提到的一种基于css3新的column-count特性的方案,这种方案本来是我最喜欢的,因为不需要额外的标签嵌套,也没有js参与布局,css写起来也是简洁又优雅。但是在使用safari调试页面时发现了一个奇怪的问题,使我最终决定放弃这种方案。

图集错落九宫格实现方案

最近在用vue仿小红书的h5版,在界面上唯一比较让人头大的就是这个伪九宫格(不知道有没有专业的称呼,我就这样叫了)的图集了。

难点分析如下:

  • 实现图片宽高一致
  • 尽量减少html标签
  • 尽量不使用js
  • 6n和12n情况下大图的左右位置不同
  • 最后一部分凑不齐9块的排布方案

ES6笔记

根据阮一峰《ECMAScript 6 入门》整理。

let和const命令

let

块级作用域

let是块级作用域变量,声明的变量只在{}内有效。
其适用于for循环内,特别需要注意的是:for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

没有变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

面试要点整理

http相关

https

Https可以理解为HTTP+SSL/TLS, 即 HTTP 下加入 SSL 层,即HTTP-SSL-TCP-IP,HTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSL,用于安全的 HTTP 数据传输.目前使用最广泛的是TLS 1.1、TLS 1.2。
HTTP面临的风险有:

  • 窃听风险
  • 篡改风险
  • 冒充风险


not found!