jquery.fillwidth
Version:
A jQuery plugin that given a `ul` with images inside their `lis` will do some things to line them up so that everything fits inside their container nice and flush to the edges. Used throughout [Artsy](http://artsy.net) to make rows of images fit inside a
45 lines (42 loc) • 1.13 kB
HTML
<html>
<head>
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.fillwidth.js"></script>
<script>
$(function(){
//
// Generate a random ul of placekittens
//
var kittens = "<ul>"
, liWidths = []
, height = 200;
for(var i = 0; i < 20; i++) {
randWidth = Math.ceil(50 + (Math.random() * 600));
liWidths.push(randWidth);
kittens += "<li>"
+ "<img src='http://placekitten.com/" + randWidth + "/" + height + "'>"
+ "</li>";
}
kittens += "</ul>";
$('body').append(kittens);
//
// Apply fillwidth passing in the widths stored above to avoid initial flickering.
//
$('ul').fillwidth({ liWidths: liWidths });
});
</script>
<style>
li {
margin: 0 15px 15px 0;
}
img {
height: 200px;
}
</style>
</head>
<body>
</body>
</html>