一些问题-优快云博客

本博客详细记录了一位开发者如何通过优化CSS样式、解决浏览器兼容问题、改进JavaScript代码来提高网页布局效果和编程逻辑效率的过程。包括解决border宽度问题、实现标题栏置顶功能、修复海报与视频大小不一致、修正边距问题等。同时，分享了在遇到布局问题时，如何通过思考正确的逻辑结构来避免反复修改代码的经验。

2016年第四周周报

1. 上周工作内容

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

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 :`<h2 class="posfixed" id = "topTitle">${item.innerHTML}</h2>`,
            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.修正了一些边距的问题。

2. 下周工作计划

确保页面的问题都解决，并完成测试。

3.问题

多列多个元素布局的问题，目前我的布局：

这个是使用<kdb>justify-content：flex-start</kdb>,但是可以注意到的是，最左边和最右边的边距距离并不一致，而如果使用<kdb>justify-content：space-between</kdb>进行布局，又会导致最后一行元素也左右对称。
能不能达到下面原生的效果，如下图：
图片描述

3.学习与成长

感觉在编程的时候，更重要的是思考好解决问题的逻辑和需要使用的设计模式与算法，一开始没有思考对正确的逻辑，结果导致在<kdb>coding</kdb>的时候不断的陷入困难，不得不推翻前面自己的假设，从新想设计思路。下次再在做类似问题的时候，思考好清晰的逻辑结构，确保逻辑不会出错，然后再进行从<kdb>coding</kdb>。