填充列表元素中的空格
我有一个流体网格(高度和宽度).LI总是矩形的,并使它们适应屏幕尺寸.
现在我需要填写列表,所以它们都具有相同的高度.如果所有列都具有一个LI元素,则这将很容易.但是有双倍大小的列,其中一些可以包含大尺寸的LI.在某些情况下,在列的中间甚至有空的空间,因为有一个很小的Li,一个小的,然后又是一个大的.
在某些内容页面上,所有li都在一列中.
在每种情况下,li都是向左浮动的.我已经制作了一些图片来解释这个问题:
首先,我想计算孩子的数量并进行比较.但是当所有LI都在一个列中或者在列的中间缺少LI时,它变得复杂.
这是我尝试过的:
var longest = 0
$("ul.grid-col").each(function(){
var liCount, $that = $(this);
liCount = $that.find("> li").length;
if ($that.is(".double")){
if( $that.find("li.big").length ){
var bigCount = $that.find("li.big").length
liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one
}
liCount = liCount / 2
}
if ( longest < liCount ){
longest = liCount
}
})
现在我知道有多少李需要填充空白空间,它很容易填满它们.但我怎么知道李的中间是否有空的空间？你会如何处理单列的特殊情况？
我让这个在 FF 工作。希望我正确理解你的问题。我尝试通过构建一个 html shell 来模拟您的情况。我不确定它是否符合您的代码，但我基于您的图像。
我的方法的要点如下：
单列 ul 非常简单。迭代所有 ul 以查看最大高度是多少。将 maxHeight 除以 li 高度，然后添加 li 以根据需要填写。
双宽 ul 有点棘手。我创建了一个简单的数组来表示构成双宽列的单个空格。然后，我单步执行每个 li 并在适当的情况下将空间索引的状态更新为已填充。如果需要单数的地方出现双数，那么我添加一个新的 li。在到达双 ul 的 li 数组末尾后，我再次检查空格数组，以确保 ul 末尾没有任何空值。
希望代码比我的解释更清楚一些。:)
<style type="text/css">* {margin:0; padding:0; list-style:none; border:none; outline:none;}
body {}
ul {float:left; display:inline; background:#efefef; position:relative;}
ul.single {width:50px;}
ul.double {width:100px;}
li {float:left; display:inline; background:#dddddd; -moz-border-radius:10px;}
li.single {height:50px; width:50px;}
li.double {height:100px; width:100px; background:#999999;}
.added {background:#990000 !important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var maxHeight = 0;
var maxWidth = 0;
// Update the ul to manually set height and widths.
$('ul').each(function(){
var height = $(this).outerHeight();
var width = $(this).outerWidth();
$(this).css({
'height': height,
'width': width
});
if(height > maxHeight) {maxHeight = height;}
if(width > maxWidth){maxWidth = width;}
});
var single = 50;
var double = 100;
// go over the li's and see if any spaces are empty.
$('ul').each(function(){
if($(this).hasClass('single')){
var totalSpaces = maxHeight / single;
var liCount = $(this).find('li').length;
for(var i = liCount; i<totalSpaces; i++){
$(this).append('<li class="single added"> </li>');
}
} else {
// Abstract a two column grid.
var totalSpaces = maxHeight / single * 2;
// Set up an array representation of the spaces.
var spaces = [];
// Preset all spaces as empty.
for(var i=0; i<totalSpaces; i++){
spaces.push(false);
}
var currentSpace = 0;
// Iterate over the li's and update spaces array.
$(this).find('li').each(function(index, ele){
if($(ele).hasClass('single')){
spaces[currentSpace] = true;
currentSpace++;
} else {
// Is this the right column? (is the currentSpace odd?)
if(currentSpace % 2 != 0){
// Insert a single li.
$(ele).before('<li class="single added"> </li>');
spaces[currentSpace] = true;
currentSpace++;
}
for(var i=currentSpace; i<(currentSpace + 4); i++){
spaces[i] = true;
}
currentSpace+=4;
}
});
// finally, go back over the spaces array and fill in any missing li's from the end.
var me = $(this);
$(spaces).each(function(index, ele){
if(!ele){
// insert a single li at the end.
$(me).append('<li class="single added"> </li>');
spaces[index] = true;
}
});
}
});
});
</script>
<ul class="single">
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
</ul>
<ul class="single">
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
</ul>
<ul class="double">
<li class="double"> </li>
<li class="single"> </li>
<li class="double"> </li>
<li class="single"> </li>
</ul>
<ul class="single">
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
</ul>
<ul class="single">
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
<li class="single"> </li>
</ul>
<ul class="double">
<li class="single"> </li>
<li class="double"> </li>
<li class="double"> </li>
<li class="single"> </li>
</ul>
<ul class="single">
<li class="single"> </li>
<li class="single"> </li>
</ul>
<ul class="double">
<li class="single"> </li>
</ul>
<ul class="double">
<li class="double"> </li>
</ul>