{template modoer_header}
<div id="body">
    <div id="content">
        <!-- 包含所有图片的容器 -->
        <div id="wf-thumbs">
            <!-- 各个图片的容器 -->
            <div class="wf-imgbox wf-imgnox-left" id="thumbs_1">
                <div class="wf-container">
                    <div class="wf-category">
                        <h3>浏览模式</h3>
                        <ul>
                            <!--{loop $typelist $key $val}-->
                            <li$active[type][$key]><a href="javascript:;" onclick="list_display('item_subject_type','$key')">$val</a></li>
                            <!--{/loop}-->
                        </ul>
                        <div class="clear"></div>
                        <h3 class="wf-line">排序方式</h3>
                        <ul>
                            <!--{loop $orderlist $key $val}-->
                            <li$active[orderby][$key]><a href="javascript:;" onclick="list_display('item_subject_orderby','$key')">$val</a></li>
                            <!--{/loop}-->
                        </ul>
                        <div class="clear"></div>
                        <h3 class="wf-line">所属分类</h3>
                        <ul>
                            <li{if $pid==$catid} class="selected"{/if}><a href="{url item/list/catid/$pid/aid/$aid}">全部</a></li>
                            <!--{if $category_level<=2 && $subcats}-->
                                <!--{get:item val=category(pid/$catid)}-->
                                <li{if $val[catid]==$catid} class="selected"{/if}><a href="{url item/list/catid/$val[catid]/aid/$aid}">$val[name]</a></li>
                                <!--{/get}-->
                            <!--{else}-->
                                <!--{get:item val=category(pid/$category[$catid][pid])}-->
                                <li{if $val[catid]==$catid} class="selected"{/if}><a href="{url item/list/catid/$val[catid]/aid/$aid}">$val[name]</a></li>
                                <!--{/get}-->
                            <!--{/if}-->
                        </ul>
                        <div class="clear"></div>
                        <!--{if $model['usearea']}-->
                        <h3 class="wf-line">所属地区</h3>
                        <ul>
                            <li{if !$aid} class="selected"{/if}><a href="{url item/list/catid/$pid}">全部</a></li>
                            <!--{loop $boroughs $key $val}-->
                            <li{if $aid==$key||$paid==$key} class="selected"{/if}><a href="{url item/list/catid/$catid/aid/$key}">$val</a></li>
                            <!--{/loop}-->
                        </ul>
                        <div class="clear"></div>
                        <!--{/if}-->
                        <!--{if $model['usearea'] && $streets}-->
                        <h3 class="wf-line">所属地区</h3>
                        <ul>
                            <!--{loop $streets $key $val}-->
                            <li{if $aid==$key} class="selected"{/if}><a href="{url item/list/catid/$catid/aid/$key}">$val</a></li>
                            <!--{/loop}-->
                        </ul>
                        <div class="clear"></div>
                        <!--{/if}-->
                        <!--{if $attcats}-->
                        <!--{eval $att_cats = $_G['loader']->variable('att_cat','item');}-->
                        <!--{loop $attcats $att_catid}-->
                        <!--{if $att_cats[$att_catid]}-->
                        <h3 class="wf-line">{$att_cats[$att_catid][name]}</h3>
                        <ul>
                            <!--{eval $att_url = item_att_url($att_catid,0,1);}-->
                            <!--{eval $ix=0;}-->
                            <!--{get:item val=attlist(catid/$att_catid)}-->
                            <!--{eval $att_url = item_att_url($att_catid,$val_k);}-->
                            <li {if $atts[$att_catid]==$val_k} class="selected"{/if}><a href="{url item/list/catid/$catid/aid/$aid/att/$att_url}">$val[name]</a></li>
                            <!--{/get}-->
                        </ul>
                        <div class="clear"></div>
                        <!--{/if}-->
                        <!--{/loop}-->
                        <!--{/if}-->
                    </div>
                </div>
            </div>
            <div class="wf-imgbox wf-imgnox-left" id="thumbs_2"></div>
            <div class="wf-imgbox wf-imgnox-left" id="thumbs_3"></div>
            <div class="wf-imgbox wf-imgnox-right" id="thumbs_4"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="loadingmessage"></div>
</div>
<div id="wf_pictures" style="display:none;">
    {template item_subject_waterfall_li}
</div>
<script type="text/javascript">
var offset = $offset; //单次载入图片数量
var wf_count_c = 1; //当前已经加载次数
var wf_count = $wf_count; //最多加载几次
var ajax_loading = true; //是否进行ajax加载
$(function() {
    // 首次打开时的加载
    load_pictures($('#wf_pictures'));
});
$(window).bind("scroll", function(){
    // 判断窗口的滚动条是否接近页面底部，
    if( $(document).scrollTop() + $(window).height() > $(document).height() - 100 && ajax_loading) {
        //自动获取下一页数据
        load_next_page();
    }
});
function load_pictures(container) {
    var x = h = 0;
    var gid = 'thumbs_1';
    container.find('.wf-container').each(function(i) {
        //查找容器内最短的一个加载图片
        $('#wf-thumbs .wf-imgbox').each(function(y) {
            if(!y) {
                h = $(this).height();
                gid = $(this).attr('id');
            } else if($(this).height() < h) {
                h = $(this).height();
                gid = $(this).attr('id');
            }
        });
        x++;
        $('#'+gid).append($(this)); //加载图片
    });
    //没有加载满，表明已经加载了全部的数据
    if(x < offset) {
        if($('#wf_multipage')[0]) {
            $('#loadingmessage').append($('#wf_multipage'));
        } else {
            show_wf_message('全部加载完毕');
        }
    } else if(wf_count_c >= wf_count) { //单页加载次数满，则不再ajax加载，显示分页允许选择下一个页面进行加载
        $('#loadingmessage').append($('#wf_multipage')); //显示分页
    } else {
        //本次加载完毕，允许进行下一页加载
        ajax_loading = true;
    }
}
function load_next_page() {
    //正在加载，因此锁定加载
    ajax_loading = false;
    //找到下一页的url
    var nexturl = $('#multipage').find('[nextpage="Y"]').attr('href');
    if(!nexturl) {
        if($('#wf_multipage')[0]) {
            $('#loadingmessage').append($('#wf_multipage'));
        } else {
            show_wf_message('全部加载完毕...');
        }
        return;
    }
    show_wf_message('正在加载...请稍后...');
    //获取下一批图片
    $.post(nexturl, { 'in_ajax':1, 'waterfall':'Y' },
    function(result) {
        $('#loadingmessage').html('');
        if(result == null) {
            show_wf_message('信息读取失败，可能网络忙碌，请稍后尝试。');
        } else if (is_message(result)) {
            myAlert(result);
        } else if(result != '') {
            wf_count_c++;
            //ajax获取后，加载到页面
            load_pictures($('#wf_pictures').html(result));
        } else {
            show_wf_message('全部加载完毕......');
        }
    });
}
//在底部显示的状态信息
function show_wf_message(msg) {
    if($(".wf-message")[0]) {
        $(".wf-message").html( msg );
    } else {
        $('#loadingmessage').append( '<div class="wf-message">'+msg+'</div>' );
    }
}
</script>
<!--{eval footer();}-->