JQuery的砌體 - 擴大div的比其他div的

我在做類似於iphone的佈局（有圖片/你可以點擊獲取更多信息的數字一堆磚）的東西。佈局設置完成後，我希望點擊事件將其中一個圖塊展開爲全屏。現在，它移動瓷磚，以便重新調整佈局。是否有可能讓砌體停止渲染，以使一塊拼塊在其他拼塊上放大？JQuery的砌體 - 擴大div的比其他div的

以下是我試過什麼（但沒有成功）。注意：它使用d3.js來生成砌體使用的div。

function drawGrid(divname,orders) 
{ 
var mydiv = d3.select(divname); 
$(divname).masonry({ 
    itemSelector: '.g1', 
    isAnimated: true, 
    //isResizable: true 
}); 

var myd = mydiv.selectAll("div"); 
var mygs = myd.data(orders,function(d){ return d.orderid;}) 
    .enter().append("div") 
    .attr("class","g1") 
    .append("g"); 

var x1 = mygs.append("div") 
     .attr("class","tickerdiv") 
     .text(function(d){ return d.ticker; }); 


var ActiveOrder = "1"; 
$(divname+' .g1').click(function() { 
    //$(this).show('maximised'); 
    console.log("clicked") 

    $(this).animate({"display":"none","position": "absolute", 
     "top": "0", 
     "left": "0", 
     "width": "100%", 
     "height": "100%", 
     "z-index": 1000 }, 1000); 
}); 
var x = []; 
x.redraw = function(o) 
{   
    x1.text(function(d){ return d.ticker; }); 
} 
return x; 
}

和CSS文件：

.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}

來源

2012-08-01 user1167650

見上...讓我知道，如果你需要更多的走下車的 – user1167650 2012-08-02 16:47:26

砌體使用裝箱算法。 – Bytemain 2012-08-02 17:05:29

編輯好吧，我的第一個答案是沒有用在這裏 - 絕對定位不會砌體的/同位素的絕對相對定位容器的情況下工作其中包含有定位的元素;解決方案是在點擊時將DOMON/DOM元素的內容從DOM中移出，並將其暫時添加到主體中。你可以看到基本思想in my dirty swedish sandbox

<!-- masonry/Isotope item large --> 

<div class="item large"> 
    <div class="header"> 
     <p>Click here</p> 
    </div> 
    <div class="minimised"> 
     <p>Preview</p> 
    </div> 
    <div class="maximised"> 
     <p>Content</p> 
     <button id="screen-overlay-on">Screen overlay on</button> 
     <div id="screen-overlay-background"></div> 
     <div id="screen-overlay-content"> 
      <p>Content</p> 
      <button id="screen-overlay-off">Screen overlay off</button> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#screen-overlay-on').click(function(){ 

     var sob = $('#screen-overlay-background').detach(); 
     var soc = $('#screen-overlay-content').detach(); 

     sob.appendTo('body'); 
     soc.appendTo('body'); 

     $('#screen-overlay-background').toggleClass("active"); 
     $('#screen-overlay-content').toggleClass("active"); 
    }); 

    $('#screen-overlay-background, #screen-overlay-off').click(function(){ 
     $('#screen-overlay-background').toggleClass("active"); 
     $('#screen-overlay-content').toggleClass("active"); 
    }); 

}); 
</script>

使用CSS像

#screen-overlay-background { 
display: none; 
position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background-color: #333; 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
z-index: 1000; 
} 

#screen-overlay-content { 
display: none; 
position: absolute; 
top: 50%; 
left: 50%; 
height: 240px; 
width: 320px; 
margin: -120px 0 0 -160px; 
background-color: #FFF; 
z-index: 1000; 
} 

#screen-overlay-background.active, #screen-overlay-content.active { 
display: block; 
}

來源

2012-08-02 08:17:23 Systembolaget

在上面添加了我的代碼。我試圖讓你的代碼工作，但砌體仍然在它周圍移動對象。此外，只有100％的寬度工作（100％的高度不）。 – user1167650 2012-08-02 14:42:57

而且 - 您是否嘗試更新的答案並查看了在線沙盒？基本上，你可以用這種方法制作全屏幕的東西，可能會跳過那個關閉的對話框窗口，這是你相信不需要的次要疊加層。 – Systembolaget 2012-08-03 07:50:02

現在要把它...我有點猶豫地說，它會工作，因爲我想擴大div來全屏動畫從它的當前位置 – user1167650 2012-08-03 13:34:33

您可以添加：懸停在CSS元素和改變的z-index。你可以很容易地類以及改變這種上點擊...

.item { 
    z-index:1 
} 

.item:hover{ 
    z-index:2500; 
}

來源

2014-11-26 01:56:23 DDT

JQuery的砌體 - 擴大div的比其他div的

回答

相關問題