Javascript 浏览器调整大小中的宽度问题

我有

li

元素和

position:absolute

，我使用javascript的

transform:translate（）

对它们进行定位。 当调整浏览器窗口的大小时，我需要重新定位它们，它可以正常工作，但是当

li

宽度在

50%

和

25%

之间变化时 媒体查询时，元素在某些屏幕尺寸下的位置不正确，这是因为元素的实际

宽度

与

javascript

中计算的宽度不同

HTML：

<div class="galleryList">
  <ul>
    <li class="filter-gallery">
      <a href="#">
        <img src="pics/g1.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
        <img src="pics/g2.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g3.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g4.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g5.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g6.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g7.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g8.jpg" alt="">
        </a>
        </li>
      </ul>
    </div>

    img{
       max-width:100%;
    }
    .galleryList ul{
      position: relative;
    }
    .filter-gallery{
      width: 50%;
      position: absolute;
      top:0;
      left: 0;
      overflow: hidden;
    }
    @media screen and (min-width: 620px) {
      .filter-gallery{
        width: 25%;
      }
    }

    $(document).ready(function(){

      var filterItems = $(".filter-gallery") ,
      galleryList = $(".galleryList") ;

      positionItems(filterItems);

      function positionItems(filterItems){

        var totalFilterItemswidth = 0 , rows = 0 , newI = 0 , useNewI= false ,
        filterItemsHeight = filterItems.outerHeight() ,
        filterItemsWidth = filterItems.outerWidth() ,
        galleryListWidth = galleryList.outerWidth();

        console.log(filterItemsWidth , filterItems[0]); 

        //positioning filter items
        for(var i=0 ; i < filterItems.length ; i++){
          var currentElement = $(filterItems[i]) ,
          elementIndex = i ,
          x ,
          y = 0;

          if(totalFilterItemswidth == galleryListWidth){ // 1 row completed
            rows++;
            totalFilterItemswidth = 0; //start adding widths again for next rows
            newI = 0;
            useNewI = true;
          }

          if(useNewI){
            elementIndex = newI++;
          }

          y = filterItemsHeight * rows;
          x = elementIndex * filterItemsWidth ,

          currentElement.css({
            transform: "translate(" + x + "px ," + y +"px )" 
          });

          filterItemsWidth = filterItems.outerWidth();

          totalFilterItemswidth += filterItemsWidth;
        }

        galleryList.css({
          height : filterItemsHeight * (rows+1) + "px"
        });

        }

        $(window).resize(function(){
          positionItems(filterItems);
        });
    });

jQuery：

<div class="galleryList">
  <ul>
    <li class="filter-gallery">
      <a href="#">
        <img src="pics/g1.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
        <img src="pics/g2.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g3.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g4.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g5.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g6.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g7.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g8.jpg" alt="">
        </a>
        </li>
      </ul>
    </div>

    img{
       max-width:100%;
    }
    .galleryList ul{
      position: relative;
    }
    .filter-gallery{
      width: 50%;
      position: absolute;
      top:0;
      left: 0;
      overflow: hidden;
    }
    @media screen and (min-width: 620px) {
      .filter-gallery{
        width: 25%;
      }
    }

    $(document).ready(function(){

      var filterItems = $(".filter-gallery") ,
      galleryList = $(".galleryList") ;

      positionItems(filterItems);

      function positionItems(filterItems){

        var totalFilterItemswidth = 0 , rows = 0 , newI = 0 , useNewI= false ,
        filterItemsHeight = filterItems.outerHeight() ,
        filterItemsWidth = filterItems.outerWidth() ,
        galleryListWidth = galleryList.outerWidth();

        console.log(filterItemsWidth , filterItems[0]); 

        //positioning filter items
        for(var i=0 ; i < filterItems.length ; i++){
          var currentElement = $(filterItems[i]) ,
          elementIndex = i ,
          x ,
          y = 0;

          if(totalFilterItemswidth == galleryListWidth){ // 1 row completed
            rows++;
            totalFilterItemswidth = 0; //start adding widths again for next rows
            newI = 0;
            useNewI = true;
          }

          if(useNewI){
            elementIndex = newI++;
          }

          y = filterItemsHeight * rows;
          x = elementIndex * filterItemsWidth ,

          currentElement.css({
            transform: "translate(" + x + "px ," + y +"px )" 
          });

          filterItemsWidth = filterItems.outerWidth();

          totalFilterItemswidth += filterItemsWidth;
        }

        galleryList.css({
          height : filterItemsHeight * (rows+1) + "px"
        });

        }

        $(window).resize(function(){
          positionItems(filterItems);
        });
    });

$（文档）.ready（函数（）{
var filterItems=$（“.filter gallery”），
galleryList=$（“.galleryList”）；
位置项目（过滤器项目）；
功能位置项（过滤器项）{
var totalFilterItemswidth=0，rows=0，newI=0，useNewI=false，
FilterItemsHight=filterItems.outerHeight（），
filterItemsWidth=filterItems.outerWidth（），
galleryListWidth=galleryList.outerWidth（）；
log（filteriemswidth，filteriems[0]）；
//定位过滤器项
对于（变量i=0；i

console.log（）

我不明白为什么会发生这种情况，以及如何解决它

谢谢
@Jojo先生不，他们有
最大宽度：100%
@Jojo先生抱歉，我编辑了它，因为我看不出你对代码感兴趣，使用绝对定位不利于生产，只会使事情复杂化，特别是如果您希望用代码更正演示文稿。@Jojo先生，我想创建一个这样的图库。这就是为什么我使用绝对定位@Mister Jojo不他们有
最大宽度：100%
@Mister Jojo抱歉我编辑了它因为我看不出你的代码有什么意思，使用绝对定位不利于生产，只会使事情复杂化，特别是如果您希望用代码更正演示文稿。@Jojo先生，我想创建一个这样的图库。这就是我使用绝对定位的原因