equalizer
Version:
A simple way to keep elements with equal height without jQuery!
51 lines (39 loc) • 1.76 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Equalizer - AMD Test</title>
<style>
div, article {
padding: 20px;
margin: 20px;
background-color: #aaa;
width: 300px;
float: left;
box-sizing: border-box;
}
hr {
clear: both;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!</div>
<hr>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.</article>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!</article>
<script src="../node_modules/requirejs/require.js"></script>
<script>
requirejs(['../dist/equalizer'], function(Equalizer) {
var equalizerString = new Equalizer('div');
var equalizerBlock = new Equalizer(document.querySelectorAll('article'));
equalizerString.align();
equalizerBlock.align();
});
</script>
</body>
</html>