javascript - Mansory/Isotope 不适用于不同宽度的元素

Question

正如您在下面的代码笔中看到的那样；当可以放置其他元素时，第一个图像旁边有一个未填充的空间。

我还没有找到任何以百分比定义元素宽度的解决方案。

代码笔:https://codepen.io/anon/pen/qXEMaz

HTML:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div class ="container">
<div class=" isotope row  gutter">
                    <div class="grid-sizer col-2 mosaic-item">  
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>   
                    </div>

                    <div class="col-1 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>
                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
                    </div>
                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>

                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
                    </div>

                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>

        </div>
</div>

CSS:

.col-1 ,
.col-1 {
    width: 100%;
}

.col-2 ,
.col-2 {
    width: 49.99%;
}

@media only screen and (max-width: 992px) {
    .col-2 ,
    .col-2 {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .col-2 ,
    .col-2 {
        width: 100%;
    }
}

.col-1 ,
.col-2{
    float: left;
}
.gutter>div{
  padding: 10px;
}

.gutter img{
  width: 100%;
}  

Javascript/jQuery:

 $(document).ready(function(){
   isotope();
 });
function isotope(){
var $portfolio = $('.isotope');
       $portfolio.imagesLoaded(function() {
           $portfolio.isotope({
               isOriginLeft: true,
               stagger: 30,
               masonry: {
                 percentPosition: true
               }
           });
           $portfolio.isotope();

       });
}

谢谢。

Answer 1

这就是你所追求的吗？我所做的只是在第一个列 block 之后添加另一个 2 列 block 。在全屏模式下检查代码以查看列的工作情况。

 $(document).ready(function(){
   isotope();
 });
function isotope(){
var $portfolio = $('.isotope');
       $portfolio.imagesLoaded(function() {
           $portfolio.isotope({
               isOriginLeft: true,
               stagger: 30,
               masonry: {
                 percentPosition: true
               }
           });
           $portfolio.isotope();

       });
}
     

.col-1 ,
.col-1 {
    width: 100%;
}

.col-2 ,
.col-2 {
    width: 49.99%;
}

@media only screen and (max-width: 992px) {
    .col-2 ,
    .col-2 {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .col-2 ,
    .col-2 {
        width: 100%;
    }
}

.col-1 ,
.col-2{
    float: left;
}
.gutter>div{
  padding: 10px;
}

.gutter img{
  width: 100%;
}

         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div class ="container">
<div class=" isotope row  gutter">
                    <div class="grid-sizer col-2 mosaic-item">  
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                      
                    </div>
                   <div class="grid-sizer col-2 mosaic-item">  
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                      
                    </div>

                    <div class="col-1 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>
                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
                    </div>
 <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>
                  
                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/350x150"></img>
                    </div>

                    <div class="col-2 mosaic-item ">
                        <img class="img-responsive" src="http://via.placeholder.com/150x350"></img>
                    </div>

        </div>
</div>