照片墙图片高度计算

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 //加载过程中锁定滚动加载

themes/yilia/source-src/js/photo-wall.js

@@ -12,14 +12,23 @@ const loadTip = document.getElementById('load-tip')
 function loadMoreItems(step) {
   scrollLock = true //加载过程中锁定滚动加载
   loadTip.style.display = 'block'
+  var photoWallWrapper = document.getElementById('photo-wall')
   // 滚动到底部时调用
   axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
     var itemContainer = document.createElement('div')
     var imgItems = '', index = currentIndex
-    for( ; index<currentIndex+step && index<res.data.files.length ; index++) {
-      imgItems += `<div class="item">
+    while(index<currentIndex+step && index<res.data.files.length) {
+      let imgHeight = null
+      if(res.data.files[index].width && res.data.files[index].height) {
+        let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
+        // 列宽240px 列间距20px, 计算每列宽度
+        let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
+        imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
+      }
+      imgItems += `<div class="item" ${imgHeight ? 'style="height:' + imgHeight + 'px"' : ''}>
           <img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
       </div>`
+      index++
     }
     if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
       groupid++
@@ -32,7 +41,7 @@ function loadMoreItems(step) {
     }
     itemContainer.classList.add('item-container')
     itemContainer.insertAdjacentHTML('beforeend', imgItems)
-    document.getElementById('photo-wall').appendChild(itemContainer)
+    photoWallWrapper.appendChild(itemContainer)
     setTimeout(()=>{
       loadTip.style.display = 'none'
       scrollLock = false