2

我有一个带有可点击元素的标准同位素视图。通过单击一个元素，它将变得更大。大元素的高度在 CSS 文件中定义，但我需要可变高度，具体取决于 DIV 的内容（内容为文本）；不幸的是，使用min-height css-property 而不是height不起作用，高度始终是定义的 min-height，即使内容更多。对此有何看法？

这是我的javascript代码：

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
         jQuerycontainer.addClass('clickable');
   // add the class large to the first element
     jQuerycontainer.find('.views-row-1').each(function() {
         jQuery(this).addClass('large');
     });
     jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = jQueryoptionSet.attr('data-option-key'),
            value = jQuerythis.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode(jQuerythis, options);
        } else {
            // otherwise, apply new options
            jQuerycontainer.isotope(options);
        }
        return false;
    });
    // change size of clicked element
    jQuerycontainer.delegate('.element', 'click', function() {
       // first remove all large classes
      jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');
      });   
        // then we can toggle large on the selected item
        jQuery(this).toggleClass('large');
        jQuerycontainer.isotope('reLayout');
    });
});
</script>
4

1 回答 1

7

通常，如果您将宽度设置为网格并将高度设置为自动，则同位素项目的高度只会增加，具体取决于它们的内容和内容的样式；在这里看到这个小提琴。希望有帮助...

于 2012-07-11T10:26:33.657 回答