1. 首頁
  2. 問答
  3. jquery同位素額外空間

jquery同位素額外空間

2012-12-02 60 views
0

我一直在使用同位素進行一個項目，我必須改變一些東西，因爲它正確地顯示了一切，然後我部署了它，並在.article類之間添加了所有這些額外的空間。我不知道是什麼導致了這一點，但我開始拉我的頭髮，因爲我看不出如何解決這個問題。在容器中的文章之間沒有元素，但我使用twitter引導，我想知道如果網格可能導致這個或什麼？下面是呈現的頁面代碼（有很多），但文章div是我所說的同位素。jquery同位素額外空間

這裏是間隔問題的例子：

http://i.imgur.com/3yw9r.jpg

編輯

我免去了不少的HTML專注於同位素div容器。謝謝！ 頁：

EDIT 2

添加同位素代碼：

我與這三個在我的頁面底部叫它：

//isotope 
$("#articles").imagesLoaded(IsotopeLoad); 
$(".sorter").click(IsotopeSort); 

//isotope filtering 
$("#filterBtns").children().click(OnFilterChange);

那麼這裏有那些功能

function IsotopeLoad() { 
    $("#articles").isotope({ 
     itemSelector: ".article", 
     getSortData: { 
      worn: function ($e) { 
       return $e.find(".lastWornOn").text(); 
      }, 
      purchased: function ($e) { 
       return $e.find(".purchasedOn").text(); 
      } 
     } 
    }); 
} 

function IsotopeSort() { 
    var sortByCode = $(this).parent().find(".sortBy").text(); 
     var IsAsc = $(this).parent().find(".asc").text(); 
     $("#articles").isotope({ 
      sortBy: sortByCode, 
      sortAscending: IsAsc 
     }); 
} 

function OnFilterChange() { 
    //check if first button is active 
    if ($(this).hasClass("active")) { 
     $(this).removeClass("active"); 
    } 
    else { 
     $(this).addClass("active"); 
    } 

    //get filter buttons 
    var filters = $("#filterBtns").children(".active"); 
    var filterString = ""; 
    //loop through buttons to get filter values in one string 
    $(filters).each(function (index, e) { 
     filterString = filterString + $(e).val() + ", "; 
    }); 

    if (filterString.substring(filterString.length - 2) == ", ") { 
     filterString = filterString.substring(0, filterString.length - 2); 
    } 

    filterString = $.trim(filterString) 
    //apply isotope 
    $("#articles").isotope({ 
     filter: filterString 
    }); 

}

頁面代碼：

<div class="container-fluid"> 
     <div class="row-fluid"> 

       <div class="span2"> 
    <div class="well"> 
     <div class="btn-group pull-right"> 
      <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Sort <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#" class="sorter" id="byLastWornDesc">By Last Worn</a><span class="sortBy">worn</span><span class="asc">false</span></li> 
       <li><a href="#" class="sorter" id="byLastWornAsc">By First Worn</a><span class="sortBy">worn</span><span class="asc">true</span></li> 
       <li><a href="#" class="sorter" id="byPurchasedDesc">By Last Purchased</a><span class="sortBy">purchased</span><span class="asc">false</span></li> 
       <li><a href="#" class="sorter" id="byPurchasedAsc">By First Purchased</a><span class="sortBy">purchased</span><span class="asc">true</span></li> 
      </ul> 
     </div> 
     <div class="btn-group btn-group-vertical" id="filterBtns"> 
       <button type="button" class="btn btn-mini" value=".BCBG">BCBG</button> 
       <button type="button" class="btn btn-mini" value=".Bebe">Bebe</button> 
     </div> 
    </div> 
</div> 
<div class="span10"> 
    <div id="articles" style="position: relative; overflow: hidden; height: 750px;" class="isotope"> 
      <div class="article Dress Sequin Black isotope-item" id="1" rel="tooltip" data-title="Dress Sequin Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);"> 
       <img alt="1" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20sequin%20mini%20dress.jjpgthumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span> 
      </div> 
      <div class="article Sweater Tan isotope-item" id="2" rel="tooltip" data-title="Sweater Tan" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(161px, 0px, 0px);"> 
       <img alt="2" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212114525152thumb.jpg"> 
       <span class="hide purchasedOn">11/20/2012 12:00:00 AM</span> <span class="hide lastWornOn">11/29/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Leggings Black isotope-item" id="4" rel="tooltip" data-title="Leggings Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(483px, 0px, 0px);"> 
       <img alt="4" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115347827thumb.jpg"> 
       <span class="hide purchasedOn">11/21/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Blue Sweater isotope-item" id="5" rel="tooltip" data-title="Blue Sweater" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(805px, 0px, 0px);"> 
       <img alt="5" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115533282thumb.jpg"> 
       <span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/1/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Untagged isotope-item" id="6" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 0px, 0px);"> 
       <img alt="6" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20dressthumb.jpg"> 
       <span class="hide purchasedOn">12/2/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Untagged isotope-item" id="7" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 250px, 0px);"> 
       <img alt="7" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20lace%20dressthumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span> 
      </div> 
      <div class="article Black Lace Romper isotope-item" id="8" rel="tooltip" data-title="Black Lace Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 250px, 0px);"> 
       <img alt="8" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20romperthumb.jpg"> 
       <span class="hide purchasedOn">11/29/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span> 
      </div> 
      <div class="article White isotope-item" id="10" rel="tooltip" data-title="White" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 250px, 0px);"> 
       <img alt="10" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212120238879thumb.jpg"> 
       <span class="hide purchasedOn">11/22/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span> 
      </div> 
      <div class="article Dress Green Sequin isotope-item" id="12" rel="tooltip" data-title="Dress Green Sequin" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(966px, 250px, 0px);"> 
       <img alt="12" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0002athumb.jpg"> 
       <span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">9/24/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Black Gunmetal Metallic isotope-item" id="14" rel="tooltip" data-title="Black Gunmetal Metallic" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 250px, 0px);"> 
       <img alt="14" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/EMP1thumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span> 
      </div> 
      <div class="article Floral Blue Shirt isotope-item" id="15" rel="tooltip" data-title="Floral Blue Shirt" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 500px, 0px);"> 
       <img alt="15" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0309athumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/5/2012 12:00:00 AM</span> 
      </div> 
      <div class="article White Pants Stripe isotope-item" id="16" rel="tooltip" data-title="White Pants Stripe" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 500px, 0px);"> 
       <img alt="16" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0430athumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/1/2012 12:00:00 AM</span> 
      </div> 
      <div class="article Red Romper isotope-item" id="17" rel="tooltip" data-title="Red Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 500px, 0px);"> 
       <img alt="17" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0055athumb.jpg"> 
       <span class="hide purchasedOn"></span> <span class="hide lastWornOn">7/3/2012 12:00:00 AM</span> 
      </div> 
    </div> 
    [1]: http://i.stack.imgur.com/QrtOS.jpg

來源

2012-12-02 user576838

+1

赫德版本控制的？我不知道任何人會願意拖網通過所有的代碼... – ahren

+1

是的，我想。那麼，我這樣做是一個快速的，但我真的很欣賞這個居高臨下的評論。 – user576838

+0

如果你發佈javascript的同位素，我可以告訴你什麼是問題。 – BentOnCoding

回答

1

您需要爲列定義寬度。

要麼使用選項masonry並設置其columnWidth的東西，適合的圖像

masonry:{ 
    columnWidth:200 
}

或給尺寸爲.article元素。

.article{ 
    width:200px; 
}

這將有助於ISOTOP來計算列正確的寬度..

來源

2012-12-02 23:58:53

+0

謝謝。我增加了這個寬度，我喜歡b4的磚石效果，但是現在這樣做了！謝謝！ – user576838

+0

@ user576838如果你可以發佈你想要的結果的圖像，可能會更容易建議解決方案..你可以刪除寬度併爲同位素設置'layoutMode：'fitRows''。 –

+0

我在尋找的是默認的砌體行爲，其中所有的圖像都彼此相鄰。 – user576838

相關問題

 相關問題