DIV+CSS+PHP巨献——网页内容先竖排再横排

本文原创，如果你使用含有本代码全部或部分，需要在版权文件上说明出处及保留原作者信息。目前网上唯一能全自动将内容生成先竖排再横排的代码。

传统的网页资料，显示方式都是先横排，再竖排。

例如：

1 2  3  4 （换行）
5 6  7  8 （换行）
9 10 11 12

这种表现形式很陈旧，但很多网页都在使用。不管是TABLE布局，还是DIV+CSS布局。

但是，如果想使用这种方式呢：

1 5 9
2 6 10
3 7 11
4 8 12

这种内容布局，最常用的地方莫于过 信息发布的分类了。看一下各大信息发布网站，客集齐，58同城等就明白了。

如果再加多两点要求：
一、要使用DIV+CSS。不能使用TABLE布局。
二、在程序中根据内容自动生成。而且需要程序与HTML分离的模版技术。

PHP程序：

<?

//////////////////////////////分类全自动先竖排，再横排 BY MIKEYI 2008-03-05///////////////////
//MK_CACHE为信息分类数据，你可以从数据库或缓存读取均可，数据结构为数组即可，内容及格式不限
$info_category = $MK_CACHE['info_category'];
$info_category_count = count($MK_CACHE['info_category']);
//横排数
$info_category_col = 4;
//竖排数，根据数据总条数自动
$info_category_row = ceil($info_category_count/$info_category_col);
//每条数据宽度
$info_category_width = 150;
//最外DIV宽度
$info_category_box_width = $info_category_width * $info_category_col;
//最外DIV高度 后面的整数为基数，根据实际显示字体大小作调整保持间隔，一般9px字体23 12字体26
$info_category_box_height = $info_category_row * 23;
//////////////////////////////////////////////////////////////////////////////////////////////
?>


HTML模版部分：

（由于我是使用自己开发的模版系统，所以部分伪语句大家会无法理解。于是我转成DISCUZ模版格式，方便大家理解）
//////////////////////////////////////////////////////////////////////////////////////////////
在DISCUZ模版中
<!--{loop $info_category $data}--> 相当于PHP的 foreach($info_category as $data){
{eval $key=0;} 相当于PHP的 $key = 0;
<!--{if $key!=0 AND $key%$info_category_row==0}--> 相当于PHP的 if($key!=0 AND $key%$info_category_row==0){

//////////////////////////////////////////////////////////////////////////////////////////////

                                        <!--分类全自动先竖排，再横排 BY MIKEYI 2008-03-05-->
                                        <div style="height:{$info_category_box_height}px;width:{$info_category_box_width}px;background:#fff">
                                        <div style="float:left;width:{$info_category_width}px;">
                                        {eval $key=0;}
                                        <!--{loop $info_category $data}-->
                                                <!--{if $key!=0 AND $key%$info_category_row==0}-->
                                                        </div><div style="float:left;width:{$info_category_width}px;">
                                                <!--{/if}-->
                                                <!--{if $data['lcid']==0}-->
                                                        <div style="font-weight:bold;">{$data['title']}($data['cid'])</div>
                                                <!--{else}-->
                                                        <div ><a href="{$MK_DIR['info']}/post.php?cid={$data['cid']}" <!--{if $data['highlight']}-->style="{$data['highlight']}"<!--{/if}-->>
                                                        {$data['title']}
                                                        </a></div>
                                                <!--{/if}-->
                                        {eval $key++;}
                                        <!--{/loop}-->                                       
                                        </div>
                                        </div>

/////////////////////////////////////////////////////////////////
全文完。

效果演示：
http://info.mangold.cn (由于是本地测试，不保证能看到。只要在我打开电脑时才能看到演示)

将此贴申请落伍。本人程序员，有大量原创的实用的程序实例代码。保证网上绝对无二。我有时间会陆续发上来。

//////////////////////////////////////////////////////////////////
下次将发一个用DIV+CSS 优化 TITLE标签输出的 JS 代码 。兼容FX和IE。绝非网上流行的那个和DISCUZ 2.x版的那个（实现效果一样）

DISCUZ后来的新版去掉，是因为原来那个不支持FX。并且非原创。