2

クリック可能な要素を含む標準の同位体ビューがあります。要素をクリックすると大きくなります。大きな要素の高さはCSSファイルで定義されていますが、DIVのコンテンツに応じて可変の高さが必要です（コンテンツはテキストです）。残念ながら、heightの代わりにmin-height css-propertyを使用しても機能しません。コンテンツが多い場合でも、heightは常に定義されたmin-heightになります。これについて何か意見はありますか？

ここに私のjavascriptcodeがあります：

<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

通常、幅をグリッドに設定し、高さを自動に設定すると、コンテンツとコンテンツのスタイルに応じて、Isotope アイテムの高さが大きくなります。ここでこのフィドルを参照してください。それが役立つことを願っています...

于 2012-07-11T10:26:33.657 に答える