J'ai travaillé sur un jQuery-solution à base d' — probablement pas aussi élégant que celui posté par gilly3 bien ;) et c'est aussi plus lent et un peu gonflé...
Mon astuce consiste à ajouter deux <div>s de la section, qui se trouve à gauche et cachés de la largeur d'une largeur de 0. L'un des div, un fantôme élément qui auront la même dimension que l'image, sera positionné en dessous d'un autre div qui est la hauteur de l'entretoise. Le script utilise une boucle while pour établir si le fantôme de l'élément a atteint le fond de la section parent de l'élément. Si cela n'est pas arrivé, il augmente la hauteur de la hauteur de l'entretoise de 1, jusqu'à ce que la condition est satisfaite.
Le balisage j'ai utilisé est le suivant. Je suis en utilisant le HTML5, l'attribut data-bottom-image afin d'identifier les articles que vous avez l'image flottait vers le bas. Bien sûr, il n'est pas indispensable, selon la façon dont vous souhaitez sélectionner le bon élément de section.
<section id="c1" data-bottom-image>
<h2>...</h2>
<p>...</p>
<img src="http://placehold.it/250x100" />
</section>
Et le script jQuery:
$(function () {
$("section > img:last-child").each(function () {
// Offset image based on the bottom and right padding of parent
var $par = $(this).parent();
$(this).css({
bottom: $par.css('padding-bottom'),
right: $par.css('padding-right')
});
});
// Function: adjust height of height-spacer, pixel by pixel
function adjustHeightSpacer($par, $hs, $is) {
// Stretch height spacer
$hs.height(0);
$hs.css({
height: $par.find("img").position().top - parseInt($par.css('padding-top'))
});
// Adjust height spacer
while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("+=1");
}
while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("-=1");
}
};
$("section[data-bottom-image]").each(function() {
// Append two spacers:
$(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')
var $hs = $(this).find(".height-spacer"),
$is = $(this).find(".image-spacer");
// Adjust image spacer dimension
$is.css({
height: $(this).find("img").height(),
width: $(this).find("img").width()
});
// Adjust height spacer
adjustHeightSpacer($(this), $hs, $is);
});
$(window).resize($.debounce(250,function() {
$("section[data-bottom-image]").each(function() {
// Adjust height spacer
adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
});
}));
});
Et voici le travail de Violon: http://jsfiddle.net/teddyrised/xmkAP/5/
