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

时间:2014-01-21 04:59:31

标签: javascript php html css twitter-bootstrap-3

我无法使用此代码创建一个index.html文件,其中包含来自给定rss链接的链接。我试图在index.html结束文件中生成每个RSS源列,列将按行分组3。因此,在脚本处理rss链接数组的第3个链接之后,我想在新行中重复该过程但是我没有得到正确的顺序我想到计算或插入结束和开始标记。

<?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);
?>

1 个答案:

答案 0 :(得分:0)

以下是我在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_column_in_row =($ count-1)%$ columns + 1”这一行未经测试(我通常只标记第一列/最后一列),但它应该正确计算...

<强> CSS

以下是另一个问题的建议解决方案:https://stackoverflow.com/a/21202987/3205524

您可以轻松地使用CSS清除每个.column_1的浮动,如下所示:

.column_1 {
    clear: both;
}

这样每个.column_1都会进入一个新行!