Javascript 如何打包div中的内容，以便在内容到达div底部时向右移动
我用PHP生成了一些内容，但是当内容的数量超过5个之后，高度就会大于div的高度，所以我不希望它堆叠在div的顶部，而是移动到div的右侧并从顶部开始。这是一张图片 PHPJavascript 如何打包div中的内容，以便在内容到达div底部时向右移动,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我用PHP生成了一些内容，但是当内容的数量超过5个之后，高度就会大于div的高度，所以我不希望它堆叠在div的顶部，而是移动到div的右侧并从顶部开始。这是一张图片 PHP echo '<a class="LibSectOpen"> <span style="display:none" class="SectionName">'.$Section.'</span> <div class="LibrarySects">&
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf">';
while($row = mysql_fetch_array($log2)){
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
}
echo ' </div>
</div>
</a>';
$i=1;
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf"><div class="move_right">';
while($row = mysql_fetch_array($log2)){
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i%5==0)
{
echo '</div><div class="move_right">';
}
$i++;
}
echo '</div></div></div></a>';
我相信这可能会有所帮助
JSFIDLE显示，如果您想使用css实现这一点，可以使用css列。否则，下面的答案会链接到一个js插件来实现这一点。或者，如果可能的话，您可以在PHP中创建内容时进行定位。在我看来，您不需要主容器的完整宽度。 为什么不为这两个类别添加一个固定的宽度，并将它们设置为
display:inline或显示：内联块
（仍在混淆这两个…sry）
如果您想动态地确定它，您可以检查主容器的高度对于这两个类别是否足够。如果不是这样，您可以使用设置这两个类别的css属性（我非常希望它们具有相同的css类；）
我想这应该会很神奇
编辑：啊，sry。我没看到你的代码。。。它应该以这种方式工作；） 我的解决方案包括jQuery和插件
这是工作小提琴：
代码非常简单：
$('.LibrarySectsShelf').columnize({
width: 166,
height: 150,
doneFunc: function () {
$('.LibrarySectsShelf_Book').removeClass('hidden');
}
});
css中唯一的变化是这个新类：
.hidden {
visibility: hidden
}
应将其添加到每本图书馆部门的帮助书中。这仅仅是为了防止无组织项目的闪烁。列化完成后，该类将被删除。我将在这里为您提供两个解决方案，PHP和CSS，因为@ariel已经提供了一个jQuery解决方案，因为我一直喜欢独立于JS，而且它将使用第三方脚本和jQuery库（如果您不使用jQuery）为您节省时间，我首先选择了PHP，与CSS相比，CSS在IE方面可能不太兼容
如果您想使用PHP实现这一点，您需要更改循环并设置一个计数器，这将中断
假设我们有一个数组
，我们想按照您的需要进行设置
<div class="wrapper">
<ul>
<?php
$arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
$counter = 0;
foreach ($arr as $value) {
if($counter%5==0 && $counter != 0){ echo "</ul><ul>";}
?>
<li><?php echo $value; ?></li>
<?php
$counter++;
}
?>
</ul>
</div>
现在，正如您所说，但在内容数量超过5之后，高度将大于div
的高度，因此如果您在标记中应用相同的逻辑，它将强制div
启动另一列
-
CSS
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
height: 150px;
margin: 50px;
border: 1px solid #eee;
}
ul {
float: left;
list-style-type: none;
}
ul li {
height: 30px;
width: 150px;
background: tomato;
border: 1px solid #515151;
}
ul {
list-style-type: none;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
您可以仅使用您已经在使用的PHP、HTML、CSS解决方案来实现您想要的输出：
PHP
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf">';
while($row = mysql_fetch_array($log2)){
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
}
echo ' </div>
</div>
</a>';
$i=1;
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf"><div class="move_right">';
while($row = mysql_fetch_array($log2)){
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i%5==0)
{
echo '</div><div class="move_right">';
}
$i++;
}
echo '</div></div></div></a>';
首先。不要把div放在标签上。
然后您可以找到php函数。
所以你需要做什么。
如果你用它会更好。
PDO fetch all将返回数组
<?php
$chunkSize = 5; // or any other value you need
$chunks = array_chunk($result_array,$chunkSize);
foreach($chunks as $links_array):?>
<div class="move_right">
<?php foreach($links_array as $link):?>
<!-- your link code -->
<?php endforeach; ?>
</div>
<?php endforeach ?>
以下代码检测div的结尾，并使用css创建一个新列
var col = 1;
jQuery(
function($)
{
$('#flux').bind('scroll', function()
{
if($(this).scrollTop() +
$(this).innerHeight()
>= $(this)[0].scrollHeight)
{
$("#yourdiv").css("-moz-column-count",col);
$("#yourdiv").css("-webkit-column-count",col);
col++;
}
})
}
);
简单
在我测试的每一款浏览器中都能正常工作，尽管wiki页面声称没有这样做，而且它从IE8开始就存在了。这里有很多很好的答案，我选择javascript/CSS唯一的解决方案是因为
1） PHP将全权负责获取屏幕上的数据（将来在新的演示文稿中重新使用相同的PHP逻辑）
2） Javascript和CSS可以灵活地提供每个设备、浏览器和视图大小的个性化标记安排
演示：
标记-让PHP只生成项目，而不必考虑表示
<div class="container">
<div class="item">An Item</div>
<div class="item"> An Item</div>
<div class="item">An Item</div>
....
CSS到布局
.move_right{
display:inline-block;
vertical-align:top;
}
.wrapper { display:inline-block; float:left; }
/* clear the float so the container keeps 'containing' */
.container:last-child:after {
clear:both; display:block;visibility:hidden;
height:0; content:"."; }
就这样
此外，如果我们需要“包裹计数”是动态的，我们可以根据.item
的高度和.container
的高度进行一些计算，以获得所需的“包裹”计数
假设容器有一个不允许增长的固定高度
.container { height: 300px; width: 100%; overflow: hidden; }
Javascript可以动态地找到“包装计数间隔”（找到项目在容器高度中的适合程度}
现在我们可以使用
var items = $(".item");
for(var i = 0; i < items.length; i+=wrapinterval) {
items.slice(i, i+wrapinterval).wrapAll('<div class="wrapper"></div>');
}
var items=$（“.item”）；
对于（变量i=0；i
带动态换行间隔的演示-
向同事们致歉如果这包含了已经以某种方式回答过的部分，我只是开始用CSS输入解决方案
最好的方法是使用CSS3 flex Box，如下所示：
以下是如何：
在CSS中，将这3行添加到.LibrarySectsShelf{…}
.LibrarySectsShelf {
display: flex; // to add
flex-flow: column wrap; // to add
align-content: flex-start; // to add
... // the rest of your code
}
.LibrarySectsShelf_Book{
flex: 0 0 23px;
... // the rest of your code
}
和.LibrarySectsShelf\u Book{…}
.LibrarySectsShelf {
display: flex; // to add
flex-flow: column wrap; // to add
align-content: flex-start; // to add
... // the rest of your code
}
.LibrarySectsShelf_Book{
flex: 0 0 23px;
... // the rest of your code
}
跨浏览器支持
请注意，由于Flex box是CSS3中的一项新功能，您可能需要添加一些浏览器前缀，如-webkit-
、-moz-
和-ms-
，以使其在所有主要浏览器中正常工作
还请注意，flex box包装功能仅在Firefox 28及更新版本中可用
上提供了一个工作的跨浏览器示例
为什么选择Flexbox
因为它非常灵活，它将填满所有可用空间，您不必在PHP/JavaScript中硬编码行数。只需复制并粘贴这段代码，然后尝试使用逻辑即可
<?php
for($i = 1; $i <= 20; $i++){
if($i % 5 == 1){
echo '<div style="float:left;">';
}
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i % 5 == 0){
echo '</div>';
}
}
?>
至于动态，我不使用json，我在页面上使用php。你链接上的fiddle与这个问题中的问题相同。上面提到，并非所有浏览器都支持此功能。fiddle在firefox 26上对我有效，它显示了@Mr.Alien Really？。而且，正如我已经说过的，我测试了“？”浏览器，他们支持它-我测试了“不受支持”的浏览器，它支持它。写入模式：垂直lr；
不受支持。但是没有它的示例可以正常工作。更正，它不起作用。它继续向左移动
.LibrarySectsShelf {
display: flex; // to add
flex-flow: column wrap; // to add
align-content: flex-start; // to add
... // the rest of your code
}
.LibrarySectsShelf_Book{
flex: 0 0 23px;
... // the rest of your code
}
<?php
for($i = 1; $i <= 20; $i++){
if($i % 5 == 1){
echo '<div style="float:left;">';
}
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i % 5 == 0){
echo '</div>';
}
}
?>