使用jQuery实现响应式Bootstrap等高列

Responsive same height Bootstrap columns

jquery, bootstrap, underscore

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2390
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

var fn = {

sameHeightCols: function() {

// Delay time for next function call after window resize
            var throttled = _.throttle(init, 100);

function init() {
                $('.row').each(function(i, e) {
                    var items = $('[class*="col-"]', e);

//Reset height
                    items.css('height', 'auto');

var maxH = (function() {
                        var h = 0;
                        for (var i = 0; i < items.length; i++) {
                            $(items[i]).height() > h ? h = $(items[i]).height() : null;
                        }
                        return h;
                    }());

items.css('height', maxH + 'px');

console.log('New height: ', maxH);

});

}

$(window).resize(throttled).resize();

}

};

/*--------------------------------------------------
    Doc ready
    --------------------------------------------------*/
    $(function() {
        fn.sameHeightCols();
    });

}());

编译

CSS

HTML

Uses jQuery and UnderscoreJS's <a href="https://underscorejs.org/#throttle" target="_blank">throttle function</a> to recall function when user resizes the window, instead of calling it multiple times.
        </p>
    </header>
    <div class="row">
        <div class="col-xs-4 col-a">
            <p>column</p>
        </div>
        <div class="col-xs-4 col-b">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sed incidunt, sunt harum dignissimos aliquam illum maiores aliquid. Quos atque laudantium, distinctio iste odit a ipsum odio dolore necessitatibus voluptatum.</p>
        </div>
        <div class="col-xs-4 col-c">
            <p>column</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-a">
            <p>column</p>
        </div>
        <div class="col-xs-4 col-b">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sed incidunt, sunt harum dignissimos aliquam illum maiores aliquid. Quos atque laudantium, distinctio iste odit a ipsum odio dolore necessitatibus voluptatum.</p>
        </div>
        <div class="col-xs-4 col-c">
            <p>column</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-a">
            <p>column</p>
        </div>
        <div class="col-xs-4 col-b">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sed incidunt, sunt harum dignissimos aliquam illum maiores aliquid. Quos atque laudantium, distinctio iste odit a ipsum odio dolore necessitatibus voluptatum.</p>
        </div>
        <div class="col-xs-4 col-c">
            <p>column</p>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

Responsive same height Bootstrap columns

jquery, bootstrap, underscore

编辑器支持Emmet

快捷键

Responsive same height Bootstrap columns

jquery, bootstrap, underscore

使用jQuery.Stapel.js插件实现自动分组的自适应缩略图片堆叠

使用jQuery.textillate.js实现的文本逐字母摇晃特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：