一些问题

摘要：并且满足条件下一个标题高度高于滚动的高度和条件没有下一个标题的其中之一条件。解决了原来专题页面的几个问题，如海报与大小不一致问题。修正了一些边距的问题。下周工作计划确保页面的问题都解决，并完成测试。

这一周主要把重心放在了项目方面，解决了以下几个问题：

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。