只是想知道如何停止位置：绝对元素以停止在 wapper div 上浮动
html
<?php
echo "<div class='pinWrapper'>";
echo "<h2>New Arrivals</h2>";
echo "<br />";
$all_products = get_all_products();
while ($product = mysql_fetch_array($all_products))
{
echo "<div class='block'>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>";
$Id = $product['Id'];
$limit = 1;
$img_set= get_images_by_id($Id, $limit);
while ($img = mysql_fetch_array($img_set))
{
echo "<img src='sto/" . $img["image_name"] ."'>";
}
echo "</a>";
echo "<a href='?page=product&itm=" . urlencode($product["Id"]) . "'>" . $product['item_name'] . "</a>";
echo "<div class='hpDis'>" . $product['sm_description'] . "</div>";
echo "</div>";
echo "<div class='clear'></div>";
}
echo "</div>";
?>
CSS
.pinWrapper {
position: relative;
margin: 0 auto;
width:720px;
}
.block{
position: absolute;
background: #eee;
padding: 1px;
width: 210px;
border: 1px solid #ddd;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.block img {
width: 200px;
height: auto;
}
Javascript
var colCount = 0;
var colWidth = 0;
var margin = 20;
var windowWidth = 800;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
//windowWidth = $(window).width();
colWidth = $('.block').outerWidth();
blocks = [];
console.log(blocks);
colCount = Math.floor(windowWidth/(colWidth+margin*2));
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
现场示例在这里
任何帮助是极大的赞赏。