瀑布流布局（等宽不等高jQuery）

在百度上看见的好多都是引用Masonry插件，之后我自己尝试了一个没有使用插件的

<body>

        <div id="main">

            <div class="box">

                <div class="pic">

                    <img src="../picture/1.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/3.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/4.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/5.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/6.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/4.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/5.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/6.png">

                </div>

            </div>

            <div class="box">

                <div class="pic">

                    <img src="../picture/2.png">

                </div>

            </div>

        </div>

    </body>

下面是全部的css比较简单

<style>

            * {

                margin:;

                padding:;

            }

            #main {

                position: relative;

                width: 900px;

                margin: 0 auto;

            }

            .box {

                padding: 15px 0 0 15px;

                float: left;

            }

            .pic img {

                width: 165px;

                height: auto;

            }

        </style>

最重要的这一段啦

<script>

        $(window).on('load', function() {

    waterfall();

    var dataInt = {

        "data": [{

            "src": "../picture/1.png"

        }, {

            "src": "../picture/2.png"

        }, {

            "src": "../picture/3.png"

        }]

    };

})

function waterfall() {

    var $boxs = $('#main>div');

    var w = $boxs.eq(0).outerWidth();

    var cols = Math.floor($(window).width() / w);

    $('#main').width(w * cols).css('margin', '0 auto');

    var hArr = [];

    $boxs.each(function(index, value) {

        var h = $boxs.eq(index).outerHeight();

        if (index < cols) {

            hArr[index] = h;

        } else {

            var minH = Math.min.apply(null, hArr);

            var minHIndex = $.inArray(minH, hArr);

            $(value).css({

                'position': 'absolute',

                'top': minH + 'px',

                'left': minHIndex * w + 'px'

            })

            hArr[minHIndex] += $boxs.eq(index).outerHeight();

        }

    })

}

    </script>

下面这段jq 是可以根据鼠标轮播下拉加载页面

<script>

        $(window).on('load', function() {

    waterfall();

    var dataInt = {

        "data": [{

            "src": "../picture/1.png"

        }, {

            "src": "../picture/2.png"

        }, {

            "src": "../picture/3.png"

        }]

    };

    $(window).on('scroll', function() {

      if (checkScrollSlide) {

            $.each(dataInt.data, function(key, value) {       

                var oBox = $('<div>').addClass('box').appendTo($('#main'));

                var oPic = $('<div>').addClass('pic').appendTo($(oBox));

                var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));

            })

            waterfall();

        }

    })

})

function waterfall() {

    var $boxs = $('#main>div');//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素

    var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度

    var cols = Math.floor($(window).width() / w);

    $('#main').width(w * cols).css('margin', '0 auto');

    var hArr = [];

    $boxs.each(function(index, value) {

     

        var h = $boxs.eq(index).outerHeight();// 获取每个图片的高

        if (index < cols) {

            hArr[index] = h;// 获取第一行的高度

        } else {

            var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引

            var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引

            console.log(value);

            $(value).css({

                'position': 'absolute',

                'top': minH + 'px',

                'left': minHIndex * w + 'px'

            })

            hArr[minHIndex] += $boxs.eq(index).outerHeight();

        }

    })

}

function checkScrollSlide() {

    var $lastBox = $('#main>div').last();// 获取最后一个图片

    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度

    var scrollTop = $(window).scrollTop();// 划过的高度

    var documentH = $(window).height();//浏览器的高度

    return (lastBoxDis < scrollTop + documentH) ? true : false;

}

    </script>

两个js的区别：前者没有下拉加载效果后者有下拉加载效果

瀑布流布局（等宽不等高jQuery）的更多相关文章

flexbox实现不等宽不等高的瀑布流布局
第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬＿┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...
js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
jquery实现简单瀑布流布局
jquery实现简单瀑布流布局是开头都会说的原理瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局也可以说是无缝拼图当浏览器滚动到底部时候自动加载图片加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的在ff等支持css3可以显 ...

随机推荐

18.12.09-C语言练习：黑洞数 / Kaprekar问题
题目: 程序: #include <stdio.h> int main(void) { int n, a, b, c, t, A, B; printf("输入一个三位数整数:&q ...
RESTful API 最佳实践----转载阮一峰
文章地址http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html
Java类型信息之RTTI
软件工程的一个核心问题就是软件的复用和扩展.面向对象思想通过封装,继承,派生等机制有效地解决了这个问题.但需求总是变幻莫测,不可琢磨,在面向对象这栋恢宏的大厦旁,还漂浮着一朵乌云,从而导致了RTTI的 ...
v-charts
因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下. 如何配置图表信息 echart的配置项可谓是相当的海量,能不看就不看.而v-chart对其进行了不少 ...
安卓recyclerView 分割线的那些事
在这里我想记录下recyclerView 分割线遇到的一些问题,主要提供一些个人思路,代码可能不多~ 1.宽度问题描述:我现在需要做一张卡片,卡片里面是一条条联系人,而且我们卡片外层是有阴影的,我的 ...
系统开机时提示BOOTMGR is compressed
问题描述: 开机时提示 BOOTMGR is compressed Press Ctrl+Alt+Del to restart 操作方法: 1.插入带有U盘启动的U盘2.进入winpe系统后,打开“ ...
Laravel资源路由
Route::resource('article', 'ArticleController'); 如果我们以get的方式请求‘article’,会自动分发到ArticleController的crea ...
requirejs官网
http://www.requirejs.cn/
PO、POJO、BO、DTO、VO之间的区别(转)
PO:persistent object持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中与in ...
JS经典面试题汉诺塔
我爱撸码,撸码使我感到快乐!大家好我是Counter.今天给大家分享的是利用JS将汉诺塔原理实现出来,其实主要是考察一个递归的思想,复杂的问题简单化,汉诺塔应该都知道吧,具体的游戏规则,可以百度查查, ...

瀑布流布局（等宽不等高jQuery）

瀑布流布局（等宽不等高jQuery）的更多相关文章

随机推荐

热门专题