Question

我一直在使用同位素工作，我必须改变一些东西，因为它正确地显示了一切，然后我部署了它，它在.article类之间添加了所有这些额外的空格。我不知道是什么造成了这种情况，但我开始拔头发，因为我看不出如何解决这个问题。容器中的文章之间没有元素，但是我使用的是twitter bootstrap，我想知道网格是否会导致这个或那个东西？下面是渲染的页面代码（有很多），但文章div是我所说的同位素。

这是间距问题的一个例子：

修改

我删除了很多HTML，专注于同位素容器div。谢谢！页：

编辑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

Answer 1

您需要为列定义宽度。

使用选项masonry并将其columnWidth设置为适合图像的内容

masonry:{
    columnWidth:200
}

或为.article元素提供维度。

.article{
    width:200px;
}

这将有助于isotop计算柱子的正确宽度..

jquery同位素额外空间

1 个答案: