同位素引导网格问题

Question

我正在处理这个网站页面：http://simonenicosia.com/isotopeTest/

我想达到这个网格结果： https://i.stack.imgur.com/U99mf.jpg

但是有些不对劲。不知道是col维度还是js参数...

portfolio.js

  var container = jQuery('#portfolio-grid');
  container.isotope({
    itemSelector: '.portolio-item',
    masonry: {
      columnWidth: 100
    }
  });

HTML

  <div id="portfolio-grid" class="portfolio-grid">

          <!-- For Project Expander -->
          <div class="start-nav"></div>
          <!-- Project 1 -->
          <div id="projects/pittura.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/pittura.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Pittura</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 2 -->
          <div id="projects/evoluzioni.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/grafiche.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Evoluzioni pittoriche</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 3 -->
          <div id="projects/3d.html" class="col-md-6 col-sm-12 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/resine.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Forme pittoriche<br>tridimensionali</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 4 -->
          <div id="projects/steel.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/visi.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Steel</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 5 -->
          <div id="projects/artdesign.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/loop.gif" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Art Design</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 6 -->
          <div id="projects/musticatower.html" class="col-md-6 col-sm-12 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/scultura2.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Mustica Tower</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 7 -->
          <div id="projects/unstoppable.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/land_rover.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Unstoppable spirit</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 8 -->
          <div id="projects/timeline.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/nino.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Profilo</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 9 -->
          <div id="projects/video.html" class="col-md-3 col-sm-6 portolio-item project-expander">
            <div class="portfolio-img"><img src="assets/images/video.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Video Opere</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- Project 10 -->
          <div class="col-md-3 col-sm-6 portolio-item">
            <div class="portfolio-img"><img src="assets/images/installazioni.jpg" class="img-responsive" alt="" /></div>
            <div class="portfolio-overlay"></div>
            <div class="portfolio-details">
              <h4>Contatti</h4>
              <span>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit</span>
            </div>
          </div>

          <!-- For Project Expander -->
          <div class="final-nav"></div>

        </div>

我正在使用 Bootstrap 3 + Isotope v1.5.25

Answer 1

解决了！使用打包模式https://packery.metafizzy.co/

  var container = jQuery('#portfolio-grid');
  container.isotope({
    itemSelector: '.portolio-item',
    packery: {
      gutter: 0
    }
  });

HTML

  <script src="assets/js/portfolio.js"></script>
  <script src="assets/js/isotope.pkgd.min.js"></script>
  <script type="text/javascript" src="assets/js/packery-mode.pkgd.min.js"></script>