创建新的同位素项目并插入外来内容

Question

我目前正在Wordpress的一个网站上工作。我已经到了我无法理解的地步。我正在使用同位素在我的网站的主要一侧创建和过滤我的作品。现在，如果观众点击它，我想展示作品的快速预览。我想过在选定的工作之后插入一个新的同位素项目，但每次我尝试或工作出现在网格后面时，我的网格都会分崩离析。

    <h1>Isotope - packery layout mode</h1>
<div class="container">
<div class="thumbs masonry">

  <div class="project small"></div>
  <div class="project small "></div>
  <div class="project small"></div>
     <div class="project small second">
    <div class="title">Project 02</div>
    <div class="slide-show"><ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;"><img src="slide_01.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_02.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_03.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_04.jpg"></li>
</ul></div>
    <div class="description">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam</div>
    </div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small"></div>
  <div class="project small">hello</div>
</div>
</div>

我的 CSS：

.thumbs.masonry:after {
  content: '';
  display: block;
  clear: both;
}
#content .project.small{    
    width: 22.7%;
    height: auto;
    display: block; 
    margin: 0 2% 20px 0;    
    padding-bottom: 0;
    cursor: pointer;
    float: left;        
}
#content .project.small.width2{ 
    width: 100%;
    height: 300px;
    background-color: red;  
    position: absolute;
    left: 0;
}
#content .project.small img{
    width: 100%;
    height: auto;   
}
#content .project.small .title {
    display: none;  
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;    
    padding: 0;
    font-size: 0.917em;     
    width: 100%;
    font-size: 11px;
    line-height: 1.1em;
    background: transparent url(images/black_alpha_50.png); 
}
#content .project.small.selected .title{
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    display: block;
    visibility: visible;
}
#content .project.small .title span{
    padding: 12px 17px 12px 17px;
    display: block;
}

JavaScript：

var container = jQuery('.thumbs.masonry');
        var colW = container.width() * 0.2475;      
        container.isotope({ 
        animationEngine: 'jquery',  
        resizable: false,
        layoutMode: 'packery',
        packery: {
            //columnWidth: colW
}

和

function gridResize() { 
    // update columnWidth on window resize
    var container = jQuery('.thumbs.masonry');
    var colW = container.width() * 0.2475;  
    container.isotope({
        resizable: false,
        packery: {
            //columnWidth: colW
        }
    });         
}

我已经用 codepen.io 尝试过了：http://codepen.io/anon/pen/ogwEJO红色方块将是大件选定的作品。那个有效。

我试图在Wordpress中做完全相同的事情，但红色方块总是消失。

我希望帮助开始工作的是实现我的想法。也许还有另一种解决方案。

谁能帮我解决这个问题？我真的很感激任何建议。

提前谢谢。

• 禁闭

Answer 1

单击元素并应用具有新大小的类后，使用layout作为选项，这里有一个例子：http://isotope.metafizzy.co/methods.html#layout