Частично работает в зависимости от размера предмета

Я включил масонство в плагин jQuery в свой дизайн, но он не совсем работает. Класс CSS документация содержит просто показывает:Частично работает в зависимости от размера предмета

ширина: 25%

я изменил для моих целей она в:

ширина: 24% поплавок: левый Правое поле: 5px

, который получает почти прав (но не уверен, даже если нужен), но общая идея плагина не работает, так как вы увидите два больших зазора слева, не вставая на место. Я не могу сказать, какие другие атрибуты в моих «элементах» могут понадобиться, возможно, измениться?

Я также использую Bootstrap.

HTML

<div class="item"> 
     <div class="product"> 
      <a class="add-fav tooltipHere" data-toggle="tooltip" data-original-title="Add to Wishlist" data-placement="left"> 
      <i class="glyphicon glyphicon-heart"></i> 
      </a> 
      <div class="image"> <a href="product-details.php"><img src="http://quakerrose.com/wp-content/uploads/2012/10/Stapleton-Bench-Furniture-at-Modern-History.jpg" alt="img" class="img-responsive"></a> 
      <div class="promotion"><span class="discount">&pound; 17.00</span></div> 
      </div> 
      <div class="description"> 
      <h4><a href="product-details.php">Say Cheese Camera Slicer</a></h4> 
      <h6><a href="#">By TOMS-TABLES</a></h6> 
      <img src="http://upload.wikimedia.org/wikipedia/en/c/ce/Etsy_logo.png" class="product-src-img product-src-etsy" alt="" title="" /> 
      </div> 
     </div> 
    </div>

CSS

/** Masonry **/ 

.item { width: 24%; float: left; margin-right: 5px; } 
.item.w2 { width: 50%; } 

/** end Masonry **/ 

.item { 
display: block; 
height: auto; 
transition: all 0.3s ease 0s; 
-moz-transition: all 0.3s ease 0s; 
-webkit-transition: all 0.3s ease 0s; 
-o-transition: all 0.3s ease 0s; 
-ms-transition: all 0.3s ease 0s; 
margin-bottom: 15px; 
height: auto; 
}

источник

2014-09-07 JordanC26

Если вы выяснили решение, пожалуйста, не редактируйте вопрос, но опубликуйте его как ответ, а затем примите его. – SeinopSys

Я понял, что масонство было просто не срабатывает на элементах, как это:

<!-- jQuery Masonry --> 
<script src="../assets/js/masonry.pkgd.min.js"> 

    var $container = $('#masonry'); 
    // initialize 
    $container.masonry({ 
     itemSelector: '.item' 
    }); 

    var msnry = $container.data('masonry'); 

</script>

Где это должно было быть так:

<script src="../assets/js/masonry.pkgd.min.js"></script> 
<script> 
    var $container = $('#masonry'); 
    // initialize 
    $container.masonry({ 
     itemSelector: '.item' 
    }); 

    var msnry = $container.data('masonry'); 
</script>

Все еще не работает отлично, но главное, что я просил, было просто получить его изначально, работая, что он делает сейчас.

источник

2014-09-13 08:57:29 JordanC26

Частично работает в зависимости от размера предмета

ответ

Смежные вопросы