0

我设置了cornerStampSelector 属性的同位素布局有问题，但.corner-stamp 元素似乎总是显示在左侧。我已经将 CSS 设置为 float: 就在这个元素上，但它似乎没有任何区别。这是我的 jQuery 代码：

jQuery(function() {
    var jQueryalpha = jQuery('.full-width-isotope #preload-grid');
    var jQuerycontainer = jQuery('.full-width-isotope #full-width-grid'),
            // create a clone that will be used for measuring container width
            jQuerycontainerProxy = jQuerycontainer.clone().empty().css({visibility: 'hidden'});

    jQuerycontainer.after(jQuerycontainerProxy);
    // get the first item to use for measuring columnWidth
    var jQueryitem = jQuerycontainer.find('.item').not('.w2').eq(0);

    jQuery(window).smartresize(function() {
        if (jQuery(window).width() <= 768) {
            var colNumber = 2
        }
        else if (jQuery(window).width() <= 480) {
            var colNumber = 1
        }
        else {
            var colNumber = 4
        }
        var colWidth = Math.floor(jQuerycontainerProxy.width() / colNumber);
        jQuerycontainer.css({
            width: colWidth * colNumber
        })
                .isotope({
                    resizable: false,
                    itemSelector: '.item',
                    masonry: {
                        columnWidth: colWidth,
                        cornerStampSelector: '.corner-stamp'
                    }
                }).isotope('insert', jQueryalpha.find('.item'));
    }).smartresize();

});

CSS如下：

.full-width-isotope .item.corner-stamp {
  background: #888 !important;
  float: right !important;
}
.full-width-isotope .item { background-color: #fff; margin: 0; width: 25%; height: 0; padding-bottom: 19%; float: left; overflow: hidden; position: relative; color: #222; height: 275px;}
.item.w2 { width: 50%; }
.item.h2 { height: 550px; }
.full-width-isotope .item-container { position: absolute; top: 12px; bottom: 12px; left: 12px; right: 12px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.full-width-isotope .item-container > a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.full-width-isotope .item-content { background: #FC0; display: block; position: absolute; bottom: 0; left: 0; padding: 10px; font-size: 13px; max-width: 70%; opacity: 0.85}
.full-width-isotope .item-content-hover {
    background: #FC0;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    padding: 10px;
    font-size: 13px;
    opacity: 0.85;
    display: none;
    overflow: hidden;
}
.full-width-isotope * {
    color: #54301b;
}

.full-width-isotope .item-container:hover .item-content {
    display: none;
}
.full-width-isotope .item-container:hover .item-content-hover {
    display: block;
}

HTML

<div class="full-width-isotope">
    <!-- SERVICE BOXES -->
    <div id="preload-grid">
        <div class="item corner-stamp"></div>
        <div class="item">
            <div class="item-content">
            </div>
        </div>

        <div class="w2 h2 item">
            <div class="item-content">
            </div>
        </div>
        <div class="item">
            <div class="item-content">
            </div>
        </div>
        <div class="item">      
            <div class="item-content">
            </div>
        </div>
        <div class="w2 h2 item">
            <div class="item-content">
            </div>
        </div>
        <div class="item">
            <div class="item-content">
            </div>
        </div>
    </div>
    <div id="full-width-grid"></div>
</div>
4

1 回答 1

0

你的角落邮票不应该有“项目”类

<div class="item corner-stamp"></div>

应该

<div class="corner-stamp"></div>
于 2014-09-11T06:51:03.613 回答