照片墙图片高度计算

source/_posts/前端杂烩/照片墙开发记录.md

@@ -157,7 +157,14 @@ pageid: PhotoWall
   display: none;
 }
 ```
-列宽固定, 列数不固定, 根据容器的大小自动适配
+指定列宽, 不指定列数, 根据容器的大小自动适配
+> 虽然指定了列宽, 但是列宽也不是固定的, 这个值相当于是个可允许范围内的最小值 ( 多于1列的情况下 )
+比如上面的css当中指定列宽240px, 列间距20px ( 这个值是固定的 )
+如果外部容器的宽度600px, 假如排3列, 那么每一列的宽度就是 ( 600 - 20 * 2 ) / 3 ≈ 186.67 < 240
+所以无法容纳3列
+假如排2列, 那么每一列的宽度是 ( 600 - 20 ) / 2 = 290 > 240
+**实际就会显示为2列**, 每一列的宽度是290px, 列间距20px
+换句话说, 就是剩余的宽度会平均分布到各列
 
 ### 滚动加载
 有一些第三方库实现了滚动加载, 但是尝试过之后发现无法与现有的整体布局很好地结合
@@ -173,7 +180,7 @@ const scrollDom = document.getElementById('container')
 // 作为底部标记的DOM
 const markDom = document.getElementById('footer')
 // 加载提示文字
-const loadTip = document.getElementById('load-top')
+const loadTip = document.getElementById('load-tip')
 
 function loadMoreItems(step) {
   scrollLock = true //加载过程中锁定滚动加载