每個功能均無法正常工作

Question

因此，我嘗試執行以下操作：

我在3列中得到了一些項目，並使用默認位置（ position:static ）。
我正在嘗試將它們轉換為top:0; left:0 頁面的top:0; left:0 。

---

在CSS3中不可能在不同位置（ absolute位置和static位置）之間進行轉換，因此我嘗試了一種jQuery解決方法：

$(".item").each(function(){
  var items = $(this);
  $(this).css({
      'width': items.width(),
      'height': items.height(),
      'position': 'absolute',
      'top': items.offset().top,
      'left': items.offset().left
  });
});

這應該做的是將每個項目與類item並在以下位置將其“復制”到position:absolute
這非常適合一件商品。 但是一旦我得到多個項目，它就將它們堆疊在第一個項目的位置...

---

這是一個小提琴：

 $(".item").each(function(){ var items = $(this); $(this).css({ 'width': items.width(), 'height': items.height(), 'position': 'absolute', 'top': items.offset().top, 'left': items.offset().left }); }); 

 #items{ -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; } .item{ width:100%; height:20px; text-align:center; overflow:hidden; margin:0 0 10px 0; border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="items"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">4</div> </div> 

我希望得到的結果是jQuery接受每個項目，獲取其在頁面上的位置，並替換CSS，因此它與以前的位置相同，只是position:absolute ，因此我可以將其轉換為top:0;left:0; 然后。

Answer 1

如果使用absolute ，它將始終處於同一位置！ 因為您循環了每個項目然后立即應用它，所以第一個div更改為absolute並使用top,left值將其置於舊位置。然后，第二個div仍未更改為絕對值，因此它也將使用first div位置並與first div復制。這將持續發生直到循環結束。 因此，它們將具有相同的top,left值。

因此，我的解決方案不是立即應用css屬性，將值存儲在一個輔助對象中，並在完成循環后應用所有屬性。

 var beforeApply = {} $(".item").each(function(){ var items = $(this); beforeApply[$(this).index()] = { 'width': items.width(), 'height': items.height(), 'position':'absolute', 'top': items.offset().top, 'left': items.offset().left, 'text':items.text() }; }); for(var j in beforeApply) { var index = parseInt(j) + 1; var text = beforeApply[j].text; $("#items div:nth-child("+index+")").css(beforeApply[j]).text(text + "Changed position"); } 

 #items{ -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; } .item{ width:100%; height:20px; text-align:center; overflow:hidden; margin:0 0 10px 0; border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="items"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">4</div> </div> 

Answer 2

此“在CSS3中不可能在不同位置（絕對位置和靜態位置）之間進行轉換，因此我嘗試了jQuery解決方法：”可以通過以下方法解決：默認情況下具有靜態位置，然后附加一個具有絕對位置的類。 然后CSS屬性“ transition”將起作用。

在這里擺弄https://jsfiddle.net/nikoimp/vL9bahra/

  
 
  
  
 
   
 
    
$("#1").addClass('1');
$("#2").addClass('2');
$("#3").addClass('3');
$("#4").addClass('4');
$("#5").addClass('5');
 
    
    #items{
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        column-count: 3;
        column-gap: 10px;
    }
    .item{
        -webkit-transition: width 2s;
        transition: width 2s;
        width:100%;
        height:20px;
        text-align:center;
        overflow:hidden;
        margin:0 0 10px 0;
        border:1px solid black;
    }
    .1 {
        position: absolute;
        background: red;
    }
 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="items">
      <div class="item" id="1">1</div>
      <div class="item" id="2">2</div>
      <div class="item" id="3">3</div>
      <div class="item" id="4">4</div>
   <div class="item" id="5">4</div>
    </div>
 
   
 
  

Answer 3

我能夠找到的最佳解決方案是將新內容附加到另一個隱藏的div中，然后刪除舊的div，然后顯示新的div。

您遇到了這個問題，因為在將divs更新為絕對位置時，其他divs樣式也同時在更新，因為它們是浮動的。

 $(function() { $(".item").each(function(){ var items = $(this); var _text = items.text() ; var _css = "width:" + items.width() + "px" + "; height:" + items.height() + "px" + "; position:absolute" + "; top:" + items.offset().top + "px" + "; left:" + items.offset().left + "px" + ";" var _style = "style='" + _css + "'" ; var _div = "<div class='item' " + _style + ">" + _text + "</div>" ; $("#items_clone").append(_div) ; }); $("#items").remove() ; $("#items_clone").show().attr("id", "items") ; }) ; 

 #items{ -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; } #items_clone{ display:none; } .item{ width:100%; height:20px; text-align:center; overflow:hidden; margin:0 0 10px 0; border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="items"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div id="items_clone"> </div>