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

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

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是因為我發(fā)現(xiàn)在chrome瀏覽器上模擬的時候并不支持低于1px像素的設(shè)置
    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);

標(biāo)題欄置頂?shù)膯栴}
描述：在項目中需要將每個分欄的標(biāo)題在不同的情況下分別置頂，做出原生的效果，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個標(biāo)題
          if(i !== (len - 1)){
            nextEle = my.config[tops[i+1]].element;
            article = $(nextEle).parents("article");
          }else{
            //最后一個標(biāo)題
            currentEle = my.config[tops[i]].element,
            article = $(currentEle).parents("article");
          }
          //滿足條件1：當(dāng)前標(biāo)題小于滾動的高度。并且滿足條件2：下一個標(biāo)題高度高于滾動的高度；和條件3：沒有下一個標(biāo)題;的其中之一條件。
          if(tops[i] <= currentTop && (tops[i+1] > (currentTop + 40) || !tops[i+1])){
            posfixed = false;
            //如果目前已經(jīng)有標(biāo)題被置頂
            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();
          }
        }
      })

    },

//獲取當(dāng)前頁面滾動的高度
    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;

})()

該部分并沒有完善，效果還有區(qū)別，今天應(yīng)該可以做完，做完繼續(xù)更新。

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

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

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

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

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