叶圣陶 作家卡片

叶圣陶，1894年生，江苏苏州人。原名叶绍钧，字秉臣。1911年11月，改现名叶圣陶。笔名有叶锦、圣陶、斯提、桂山、秉丞、郢生等。

1931年，九·一八事变后，发起成立“文艺界反帝抗日大联盟”。抗战期间，前往四川继续主持开明书店编辑工作，同时还参加发起成立“文艺界抗敌后援会”。1946年，回到上海后，担任中华民族全国文艺界协会总务部主任及上海市小学教师联合进修会和中学教育研究会的顾问。

是“五四”新文化运动的先驱者，是文学研究会在创作上最有成绩的作家，也是五四时期除鲁迅之外最重要的现实主义小说家。创作了我国第一部童话集《稻草人》（1923年）和中国现代文学史上第一部长篇小说《倪焕之》（1929年）。

其他作品还有：短篇小说集《隔膜》（1922年）、《火灾》（1923年）、《线下》（1925年）、《城中》（1926年）、《未厌集》（1928年）等。

扩展资料

人物评价

叶圣陶先生是中国文艺界、教育界的老前辈，他为人敦厚，彬彬有礼。著名诗人臧克家曾经说过：“温、良、恭、俭、让这五个大字是做人的一种美德，我觉得叶老先生身上兼而有之。”

叶老虚怀若谷，平易近人，办起事来刚强果断，认真负责。比如编讲义，写教材，他不但不满意有的人只是照搬照抄，而且指出其中须包括自己的研究，带有自己的心得，这种主张是他负责精神的表现。

又如编制“引得”，尤其为大部头的书编制“引得”，许多人虽明知有益于学术研究，但觉得这毕竟是为他人的工作，又耐不住工作进程中的辛苦和单调，不肯去尝试。

叶老却曾用商务印书馆铜版《十三经》白文做底本，编出一部巨册的“引得”。初着手时，困难重重，又缺乏助手，但他既已认定这是有益于广大读者的工作，就成年累月不知疲劳地去做，决不半途而废，这是他工作中负责精神的又一表现。

-叶圣陶

需要考虑的问题

Vue中获取DOM节点元素

涉及请求数据如何确认数据到达再去渲染DOM节点

涉及加载渲染的，如何监听DOM渲染完毕再去计算元素高度（Bug：如果涉及加载的，在网络不快的情况下，Vue中拿到的当前含有的元素的高度是不正确的，会影响后续的瀑布流布局）

如何实现根据设备屏幕大小来自动计算当前瀑布流卡片的宽度，并且可自定义距离屏幕边距以及卡片与卡片元素间的距离（自定义拓展）

由于是通过卡片的绝对定位（top，left属性）进行布局，那么瀑布流的高度如何随着瀑布流卡片的增加而自动撑起（高度计算）

这就是使用Vue开发瀑布流时遇到的主要问题，这里大概罗列了出来，不多BB上代码一一讲解解决方法

分析与解决

首先我们如何布局（HTML）

定义：

正确的布局（也就是HTML的编写）是实现瀑布流的前提，根据自己项目进行对号入座即可

<template>

<!-- 瀑布流容器 -->

<div class="waterfull-container" :style="{height:waterFullBoxH + 'px'}">

<!-- 瀑布流卡片列表 -->

<div class="waterfull-card-list" v-for="item in waterFullList" :key="itemid" ref="waterFullItem">

<!-- 瀑布流卡片单体 -->

<div class="waterfull-card-item">

</div>

</div>

</div>

</template>

登录后复制



分析：

从上面的HTML不难看出就三部曲

定义一个存放瀑布流的整个容器 waterfull-container

细心的小伙伴会发现这里还定义了一个动态的style属性，里面就是放着之后会用到的根据瀑布流卡片的最大高度计算整体容器的高度，后续会讲到

循环体 waterfull-card-list 这就是根据 waterFullList 数据进行循环

可以看到这里有一个 ref="waterFullItem" 这就是上面罗列的问题中：Vue获取元素节点 → 通过thisrefswaterFullItem 可以获取你想要的元素信息

瀑布流卡片 waterfull-card-item 整体

这里就自行根据卡片的布局展示进行编写即可，但要知道你卡片所有的内容应该都放在这里，才不会影响后续的卡片元素高度计算

然后我们如何写样式（CSS）

定义：

根据设计的HTML，进行对应的样式编写，这里除了 waterfull-card-item 是自己设计之外，其他都是固定写就行

waterfull-container{

position: relative;

background: #fafafa; / 瀑布流容器背景色（自定） /

}

waterfull-card-list{

position: absolute;

}

登录后复制

分析：

没错就是这么简单，我们可以看出就主容器的相对定位 relative ，以及瀑布流列表的绝对定位 absolute，有小伙伴就不解了，我瀑布流卡片 waterfull-card-item 这个怎么没有设置宽高？？

首先我们要知道，我们定义的瀑布流宽高并不是写死的，宽是根据设备的宽度和你需要定义多少列瀑布流进行计算得到的，而高就是瀑布流的精髓，这个不用说，如果高定死了，那还写啥瀑布流；而这些计算都是归功于后面的Javascript了…

最后我们如何进行计算（JavaScript）

定义：

我们先把计算的逻辑写出来，然后我们慢慢解决之后遇到的问题，比如何时知道数据到达再进行渲染，其次就是何时调用计算函数等一系列的问题

获取当前设备的宽高函数通用：

如前面所说，要根据设备宽度来计算出我们单个瀑布流卡片的宽度

_sizeWidth () {

return {

width:

windowinnerWidth ||

documentdocumentElementclientWidth ||

documentbodyclientWidth,

height:

windowinnerHeight ||

documentdocumentElementclientHeight ||

documentbodyclientHeight

}

}

登录后复制



计算用到的自定义数据自定可拓展：

data () {

return {

imgCount: 20, // 瀑布流加载的临界值,默认20个

imgFinishCount: 0, // 当前已经完成加载的个数

row: 2, // 瀑布流列数,默认为2 (自定)

gap: 10, // 瀑布流间距,默认10px (自定)

initDistance: 10, // 瀑布流距离屏幕边缘的距离,默认10px (自定)

screenWidth: '', // 当前屏幕的宽度

waterFullBoxH: '', // 瀑布流盒子总高度

waterFullItemW: '' // 根据屏幕宽度计算的瀑布流卡片宽度

}

}

登录后复制



计算逻辑重点：

created () {

// 根据数据返回的条数计算出临界值

if (thispostListlength <= 20) {

thisimgCount = thispostListlength

} else {

thisimgCount =

thispostListlength % 20 === 0 20 : thispostListlength % 20

}

// 获取屏幕宽度并且计算每一个瀑布流卡片的宽度

thisscreenWidth = this_sizeWidth()width

thiswaterFullItemW =

(thisscreenWidth - thisgap (thisrow - 1) - thisinitDistance 2) /

thisrow

},

登录后复制



分析1（关于的临界值）：

瀑布流一般都是包含的，有就会影响瀑布流卡片的渲染，因此我们要知道如何设定一个临界值作为加载完成的节点，当到达这个节点时再去获取元素宽高；话说回来，20 其实是一页可以存放多少条数据，这个问后端就行；而临界值 imgCount 其实就是你需要渲染的瀑布流展示个数，也就是请求返回的 waterFullList 里新增的数据条数，因为涉及下拉请求，那 waterFullList 就会有新的数据加入，因此做个判断来知道我们等会要加载多少个，这个或许比较绕，有不懂的可以私聊

分析2（关于瀑布流卡片的宽度计算）：

首先我们在DOM渲染前对基础数据的计算，那我们使用 created 生命钩子即可获取屏幕的可视宽度 screenWidth 并且 计算出根据自定定义的瀑布流列数 row 、瀑布流卡片的间距 gap 以及瀑布流距离屏幕两边的距离 initDistance 得到瀑布流卡片的宽度

methods:{

_doSort (nodeList) {

let arr = []

for (let i = 0; i < nodeListlength; i++) {

if (i < thisrow) {

// 1- 确定第一行

nodeList[i]styletop = thisinitDistance + 'px'

nodeList[i]styleleft =

(thiswaterFullItemW + thisgap) i + thisinitDistance + 'px'

arrpush(nodeList[i]offsetHeight)

// 2- 当瀑布流卡片个数为2以下的话,计算容器高度

if (nodeListlength === 2) {

let maxHeight = arr[0] > arr[1] arr[0] : arr[1]

thiswaterFallBoxH = maxHeight + thisinitDistance 2

} else if (nodeListlength === 1) {

thiswaterFallBoxH = arr[0] + thisinitDistance 2

}

} else {

// 3- 找到数组中最小高度 和 它的索引

var minHeight = arr[0]

var index = 0

for (var j = 0; j < arrlength; j++) {

if (minHeight > arr[j]) {

minHeight = arr[j]

index = j

}

}

// 4- 设置下一行的第一个盒子位置

nodeList[i]styletop =

arr[index] + thisgap + thisinitDistance + 'px'

// left值就是最小列距离左边的距离

nodeList[i]styleleft = nodeList[index]offsetLeft + 'px'

// 5- 修改最小列的高度

arr[index] = arr[index] + nodeList[i]offsetHeight + thisgap

thiswaterFallBoxH = arr[index] + thisinitDistance 2

}

}

},

}

登录后复制



分析：

这里的逻辑就不多说了，就是如何计算每个瀑布流卡片的top和left；这里可以看到 nodeList 是啥？？

这就是我们通过 thisrefswaterFullItem 获取当前元素的信息，这里可以拿到瀑布流下的所有卡片节点，那话说回来我们什么时候获取这些节点及其何时调用 _doSort方法呢？

methods:{

_loadImage () {

thisimgFinishCount = thisimgFinishCount + 1

if (thisimgFinishCount >= thisimgCount) {

const nodeList = this$refswaterFullItem

this_doSort(nodeList)

thisimgFinishCount = 0

}

}

}

登录后复制



分析：

这里就说说怎么监听的渲染完成 → 使用Vue中的 @load="_loadImage" ，只要加载完成就会进入 _loadImage ，此时配合临界值实现确保需要展示的瀑布流卡片的加载完后在执行计算韩式 _doSort()

有数据再渲染

上面说那么多，其实关于请求回来的数据 waterFullList 才是我们的数据主体，如果数据还没有请求到就开始渲染，那瀑布流也不会出现；

所以这里简要说说怎么知道什么时候有数据，这里不具体写了，想具体了解的小伙伴可自行google,百度

请求数据时使用promise…then（或者async…await）回调中处理数据

或者直接通过判断 waterFullList是否为空，为空就不渲染即可

你在每个DIV里面输入一些内容（比如文本），看看对齐没有？

补充：

1、请问你有输入内容试过吗？我是试了之后就对齐了，火狐是可以对齐的，我用IE8输入内容后对齐，空白就错开。

2、另外在id="d"及id="e"的样式上添加“display:inline”也可以实现对齐，IE6\IE8\FF下通过验证。