css columns when supported, javascript for non-capable
yet another css columns with javascript to rescue older browsers
HTML
<div id="carte" style="display: none;">
<h3>Pour commencer ...</h3>
<div class="texte plat-carte details">Foie gras de canard en chaud & froid :<br>
Croustillant, sauce aux câpres, rhubarbe & pomme Mi cuit,<br>
au naturel et à la moutarde Violette de Brive</div>
<div class="texte plat-price details">30,00€</div>
<div class="texte plat-carte details">Oeuf mollet-moelleux, filet de porc Ibérique Bellota<br>Croutons et lard de Colonnata, finger de pieds de cochon,<br>Chapelure d'herbes, herbes, lait fumé mousseux</div>
<div class="texte plat-price details">30,00€</div>
<div class="texte plat-carte details">Ris de veau et foie gras de canard en tourtière, Jus au Porto</div>
<div class="texte plat-price details">36,00€</div><div class="texte plat-carte details">Homard, asperges et morilles, émulsion de jus des têtes</div><div class="texte plat-price details">40,00€</div>
<h3>De la mer et l'océan ...</h3>
<div class="texte plat-carte details">Homard rôti, rouleau ananas / mangue, pickles du printemps Sauce homard au Curry de Madras</div>
<div class="texte plat-price details">45,00€</div><div class="texte plat-carte details">Saint-Pierre, risotto et émulsion au safran de Vigeois, petits pois, moules<br>Voile de Chorizo</div>
<div class="texte plat-price details">37,00€</div>
<div class="texte plat-carte details">Bar de ligne snacké, beurre blanc au<br>thym-citron, asperges vertes,<br>Legumes d'une Grecque et palets de pommes fondantes</div><div class="texte plat-price details">38,00€</div>
<h3>De la texture ...</h3><div class="texte plat-carte details">Filet de boeuf Angus, joues et oigons confits,<br>Pomme Pont Neuf aux champignons, sauce Vigneronne</div><div class="texte plat-price details">45,00€</div><div class="texte plat-carte details">Noix de ris de veau braisée, asperges et morilles<br>Emulsion de jus de veau à l’arabica</div><div class="texte plat-price details">40,00€</div><div...
JavaScript
(function($){
// from modernizr
function columnCountSupported() {
var elem = document.createElement('ch'),
elemStyle = document.createElement('ch').style,
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
prop = 'columnCount',
uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1),
props = (prop + ' ' + domPrefixes.join(uc_prop + ' ') + uc_prop).split(' ');
for ( var i in props ) {
if ( elemStyle[ props[i] ] !== undefined ) {
return true;
}
}
return false;
}
$.fn.columnizeList = function(settings){
settings = $.extend($.fn.columnizeList.defaults, settings);
//if (!columnCountSupported()) {
if (true) {
return this.each(function() {
var $list = $(this),
// we create the clone of our list in order to test height/width
$listClone = $list.clone(),
$items = $list.children('div'),
itemsPerCol = Math.ceil($items.length / settings.columnCount),
columnWidth,
columnHeight,
itemHeight = 0,
heightCounter = 0,
widthCounter = 0;
// hide the clone from the viewport
$listClone.css({
position:'absolute',
left:'-4999px'
});
// append the clone to the body, so it has dimensions
$('body').append($listClone);
heightCounter = itemHeight = $listClone.find('li').first().outerHeight();
columnHeight = itemsPerCol * itemHeight;
columnWidth = $listClone.outerWidth();
$items.each(function(i) {
var $item = $(this);
heightCounter += itemHeight;
// new column
if (i > 0 && i % itemsPerCol == 0) {
heightCounter = itemHeight;
widthCounter += columnWidth;
$item.css('margin-top', -columnHeight);
}
if (widthCounter > 0) {
...