Javascript 每3列数据生成一个新的div行_Javascript_Php_Html_Css_Twitter Bootstrap 3

Javascript 每3列数据生成一个新的div行

javascript php html css twitter-bootstrap-3

Javascript 每3列数据生成一个新的div行,javascript,php,html,css,twitter-bootstrap-3,Javascript,Php,Html,Css,Twitter Bootstrap 3,我在这段代码中遇到了问题，它创建了一个index.html文件，其中包含来自给定RSS链接的链接。我试图在index.html结束文件中为每个RSS源生成一列，每行将按3个列进行分组因此，在脚本处理完RSS链接数组的第三个链接后，我想在新行中重复这个过程，但我没有得到正确的顺序，我想计算或插入结束和开始标记 <?php require_once('magpierss/rss_fetch.inc'); // RSS library to fetch RSS news $rss_link

我在这段代码中遇到了问题，它创建了一个

index.html

文件，其中包含来自给定RSS链接的链接。我试图在

index.html

结束文件中为每个RSS源生成一列，每行将按3个列进行分组

因此，在脚本处理完RSS链接数组的第三个链接后，我想在新行中重复这个过程，但我没有得到正确的顺序，我想计算或插入结束和开始标记

<?php

require_once('magpierss/rss_fetch.inc'); // RSS library to fetch RSS news

$rss_links = array(
    'NYT World' => 'http://rss.nytimes.com/services/xml/rss/nyt/World.xml',
    'NYT US' => 'http://rss.nytimes.com/services/xml/rss/nyt/US.xml',
    'NYT Business' => 'http://rss.nytimes.com/services/xml/rss/nyt/Business.xml',
    'NYT Technology' => 'http://rss.nytimes.com/services/xml/rss/nyt/Technology.xml',
    'NYT Sports' => 'http://rss.nytimes.com/services/xml/rss/nyt/Sports.xml'
    );

$limit = 10; // Notice limit per RSS
$count = 0;

if ($limit) {
    $per_column = floor((count($rss_links) * $limit) / 3);
} else {
    foreach ($rss_links as $url) {
        $rss = fetch_rss($url);
        $count += count($rss->items);
    }

    $per_column = floor($count / 3);
}

$html = '<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RSS GENERATE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">';

$count = 0;
$rowCount = 0;
// print_r($rss_links);
// break;
foreach ($rss_links as $url) {

    if ($rowCount % 3 === 0) {
        $html .= '</div><div class="row">';
    }

    $rss = fetch_rss($url);

    if ($count == 0) {
        $html .= '<div class="col-xs-6 col-sm-4">
        <h1>'.$rss->channel['title'].'</h1>
        <ul class="list-unstyled">';
    }

    // $html .= '<h1>'.$rss->channel['title'].'</h1>';
    $c = 0;

    foreach ($rss->items as $item) {
        $html .= '<li><a href="' . $item['link'] . '">' . $item['title'] . $count .'</a></li>';
        $count++; $c++;

        if ($limit && $limit == $c) {
            continue(2);
        }

        if ($count == ($per_column + 1)) {
            $count = 0;
            $html .= '</ul></div><div class="col-xs-6 col-sm-4">
            <ul class="list-unstyled">';
        }
    }
    $rowCount++;
}

$html .= '</ul>
</div>
</div>
</div>
</body>
</html>';

file_put_contents('index.html', $html);
?>

'http://rss.nytimes.com/services/xml/rss/nyt/US.xml',
'纽约时报业务'=>'http://rss.nytimes.com/services/xml/rss/nyt/Business.xml',
'纽约时报科技'=>'http://rss.nytimes.com/services/xml/rss/nyt/Technology.xml',
'纽约时报体育'=>'http://rss.nytimes.com/services/xml/rss/nyt/Sports.xml'
);
$limit=10；//每个RSS的通知限制
$count=0；
如果（$限额）{
$per_column=楼层（（计数（$rss_链接）*$limit）/3）；
}否则{
foreach（$rss\u链接为$url）{
$rss=fetch\u rss（$url）；
$count+=count（$rss->items）；
}
$per_column=楼层（$count/3）；
}
$html='1
RSS生成
';
$count=0；
$rowCount=0；
//打印（rss链接）；
//中断；
foreach（$rss\u链接为$url）{
如果（$rowCount%3==0）{
$html.=''；
}
$rss=fetch\u rss（$url）；
如果（$count==0）{
$html.='
“.$rss->channel['title']”
；
}
//$html.=''.$rss->channel['title'].'；
$c=0；
foreach（$rss->items作为$item）{
$html.=''；
$count++；$c++；
如果（$limit&&$limit==$c）{
继续（2）；
}
如果（$count==（$per_列+1））{
$count=0；
$html.='
；
}
}
$rowCount++；
}
$html.='
';
文件内容（'index.html'，$html）；
?>

以下是我如何在PHP中“计数”：

$count = 0;
$count_total = 10; // or use dynamic count: count($all_posts)
$columns = 3;
foreach ( $all_posts as $k=>$v ) {
    $count++;
    $is_first_column = $is_last_column = false; // always set to false, then set to true only when the condition matches!
    // Now check is this a post for the first column
    if( $count==1 || ($count-1)%$columns==0 ) { // check if it's 1st and every 4,7,10 post and place it in 'column 1'
        // set additional class for every post that need to be placed in the first column
        $current_column_in_row = 1;
        $is_first_column = true;
    }
    else {
        $current_column_in_row = ($count-1)%$columns + 1;
        // for rows 4,7: (4-1)%3+1=(7-1)%3+1=1
        // for rows 2,5,8: (2-1)%3+1=(5-1)%3+1=2
        // for rows 3,6,9: (3-1)%3+1=(6-1)%3+1=3
    }

    if( $count>=$count_total ) {
        $is_last_column = true;
    }
}

行“$current\u column\u in_row=（$count-1）%$columns+1；”未经测试（我通常只标记第一列/最后一列），但它应该正确计数

CSS：

下面是另一个问题的建议解决方案：

您可以很容易地使用CSS清除每个.column_1的浮动，如下所示：

.column_1 {
    clear: both;
}

这样，每个.column_1将转到一个新行

您得到了什么输出？显示输出。同时给出所需输出的示例。