摘要：并且滿足條件下一個標題高度高于滾動的高度和條件沒有下一個標題的其中之一條件。解決了原來專題頁面的幾個問題，如海報與大小不一致問題。修正了一些邊距的問題。下周工作計劃確保頁面的問題都解決，并完成測試。

這一周主要把重心放在了項目方面，解決了以下幾個問題：

border 1px的問題，直接上代碼：

CSS部分：

.line{
    border-bottom: 1px solid #E6E6E6;
}
.iosx2line{
    border-bottom: 0.5px solid #E6E6E6;
}
.iosx3line{
    border-bottom: 0.35714px solid #E6E6E6;
}

JS部分：

    //解決border 1px問題，之所以引入這個js是因為我發現在chrome瀏覽器上模擬的時候并不支持低于1px像素的設置
    let dpr = window.devicePixelRatio,
        newsHead = $(".newsHead"),
        commentItem = $(".comment-item"),
        nList = $(".n-list,.newslist-digest"),
        mainShow = $(".mainshow-wrapper"),
        borderClass = "",
        isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);

    if (dpr >= 2) {
        var testElem = document.createElement("div");
        testElem.style.border = ".5px solid transparent";
        document.body.appendChild(testElem);
        if (testElem.offsetHeight == 1){
            if(isMobile && dpr === 2){
                borderClass = "iosx2line";
            }else if(isMobile && dpr === 3){
                borderClass = "iosx3line";
            }else{
                borderClass = "line";
            }
        }else{
            borderClass = "line";
        }
        document.body.removeChild(testElem);
    }
    newsHead.addClass(borderClass);
    commentItem.addClass(borderClass);
    nList.addClass(borderClass);
    mainShow.addClass(borderClass);

標題欄置頂的問題
描述：在項目中需要將每個分欄的標題在不同的情況下分別置頂，做出原生的效果，JS代碼如下：

const TopTitle = (() => {

const my = {

    config : {
    },

    init(){
      let h2s = $(".topNews>h2"),
          body = $("body"),
          posfixed = false;
      $(window).on("scroll",function(){
        let titleEle = $("#topTitle");
        h2s.forEach(function(item,index){
          my.config[my.getElementTop(item)] = {
            html :`
${item.innerHTML}
`,
            isfixed : false,
            element : item
          };
        })
        let tops = Object.keys(my.config),
            currentEle,
            nextEle,
            article,
            currentTop = my.getScrollTop();
        for(let i = 0,len = tops.length; i < len; i++){
          
          //前n-1個標題
          if(i !== (len - 1)){
            nextEle = my.config[tops[i+1]].element;
            article = $(nextEle).parents("article");
          }else{
            //最后一個標題
            currentEle = my.config[tops[i]].element,
            article = $(currentEle).parents("article");
          }
          //滿足條件1：當前標題小于滾動的高度。并且滿足條件2：下一個標題高度高于滾動的高度；和條件3：沒有下一個標題;的其中之一條件。
          if(tops[i] <= currentTop && (tops[i+1] > (currentTop + 40) || !tops[i+1])){
            posfixed = false;
            //如果目前已經有標題被置頂
            if(my.config[tops[i]].isfixed === false){
              my.config[tops[i]].isfixed = true;
              article.append(my.config[tops[i]].html);
              if(!!titleEle){
                titleEle.remove();
              }
            }
            
          }else if(nextEle.getBoundingClientRect().top <= 40){
            console.log(11);
            if(posfixed == false){
              $("#topTitle").removeClass().addClass("posunfixed");
              posfixed = true;
            }
          }else{
            console.log(22);
            posfixed = false;
            titleEle.remove();
          }
        }
      })

    },

//獲取當前頁面滾動的高度
    getScrollTop(){   
        var scrollTop=0;   
        if(document.documentElement&&document.documentElement.scrollTop){   
            scrollTop=document.documentElement.scrollTop;   
        }else if(document.body){   
            scrollTop=document.body.scrollTop;   
        }   
        return scrollTop;   
    },

//獲取元素在頁面中的所在位置高度
　　getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualTop;
　　}
  }

return my;

})()

該部分并沒有完善，效果還有區別，今天應該可以做完，做完繼續更新。

解決了原來專題頁面的幾個問題，如：
1.poster海報與video大小不一致問題。
2.修正了一些邊距的問題。

確保頁面的問題都解決，并完成測試。

多列多個元素布局的問題，目前我的布局：

這個是使用justify-content：flex-start,但是可以注意到的是，最左邊和最右邊的邊距距離并不一致，而如果使用justify-content：space-between進行布局，又會導致最后一行元素也左右對稱。
能不能達到下面原生的效果，如下圖：

感覺在編程的時候，更重要的是思考好解決問題的邏輯和需要使用的設計模式與算法，一開始沒有思考對正確的邏輯，結果導致在coding的時候不斷的陷入困難，不得不推翻前面自己的假設，從新想設計思路。下次再在做類似問題的時候，思考好清晰的邏輯結構，確保邏輯不會出錯，然后再進行從coding。