javascript - 框架没有初始化怎么调用
高洛峰
高洛峰 2017-04-11 10:12:22
[JavaScript讨论组]
(function($){
    $.fn.WaterFall = function(){
        /*把当前盒子下面的所有的子元素初始化成瀑布流的布局*/
        /*瀑布流容器*/
        var $this = $(this);

        var parentWidth = $this.width();

        /*瀑布流容器当中的item*/
        var items = $this.children();

        var childWidth = items.width();

        /*多少列*/
        var columnCount = 2;

        /*间距*/
        var space = 10;

        /*需要记录高度的变化  每一列的高度的变化*/
        var columnArray = [];

        /*遍历items盒子*/

        items.each(function(index,obj){
            /*当前的遍历到对象*/
            var $obj = $(obj);
            var height = $obj.outerHeight();

            /*第一列有点特殊  所有的top都是0  当前还是没有高度columnArray*/
            if(index < columnCount){
                columnArray[index] = height;
                /*针对每一个盒子设置定位*/
                $obj.css({top:0,left:index*(childWidth+space)});
            }
            /*正常情况下*/
            else{
                /*每一次都需要追加到最矮的那一列*/
                /*怎么样找到最矮的那一列???*/
                /*假设  我们先的第一个数据就是  最矮的*/
                var min = columnArray[0];
                var min_index = 0;
                for(var i = 0 ; i < columnArray.length ; i ++){
                    if( min > columnArray[i]){
                        min = columnArray[i];
                        min_index = i;
                    }
                }

                /*当我们加一个盒子之后  我们要跟新当前列的高度*/
                columnArray[min_index] += height +10;

                /*算定位*/
                $obj.css({
                    top: min + 10,
                    left:min_index*(childWidth+space)
                });

                /*min_index  就是你去追加的那一个列的索引*/

            }
            //console.log("当前每一列的高度:"+columnArray);
        });
        /*最后来设置瀑布流容器的高度*/
        /*获取最高的那一列*/
        var max = columnArray[0];
        for(var j = 0;j<columnArray.length;j++){
            if(max < columnArray[j]){
                max = columnArray[j];
            }
        }
        $this.height(max);
    }
})(jQuery);
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
天蓬老师
 // 仅仅是 jquery 的一个小插件,不算框架
 $.fn.WaterFall = function(){}

PS: HTML代码格式可能有要求,建议你找找该插件的DEMO
你选择一个容器绑定就可用了。

如: $('#p').WaterFall();

怪我咯

这是 segmentfault 特有的贴代码形式吗

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号