jQuery实现瀑布流效果

pcChao 发布于2019-08-29 13:00 / 910人阅读

摘要：何为瀑布流瀑布流，又称瀑布流式布局。最早采用此布局的网站是，逐渐在国内流行开来。四是服装款式设计资讯平台如看潮网等等。

何为瀑布流：

　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流的应用：

　　瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。[1] 国内类Pinterest网站也如雨后春笋般出现，已知网站超40家，类Pinterest网站有四种，一是电商导购，如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享，如知美、花瓣等;三是在细分垂直领域，如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。
优

应用案例：

通用类：豆瓣市集，花瓣网，我喜欢，读图知天下美女图片：图丽网时尚资讯类：看潮网时尚购物类：蘑菇街，美丽说，人人逛街，卡当网
品牌推广类：凡客达人家居o2o类：新巢网小猫家微博社交类：都爱看搞笑图片类：道趣儿艺术收藏类：微艺术潮流图文分享：荷都分享网

实现效果

HTML代码：




    瀑布流

CSS代码：

*{
    margin: 0;
    padding: 0;
}
 
#main{
    position: relative;
}
 
.pin{
    padding: 15px 0 0 15px;
    float: left;
}
 
.box{
    padding: 5px;
    border-color: 1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    border-radius: 5px;
}

jQuery代码：

$(document).ready(function(){
    $(window).on("load", function(){
        imgLocation();
        var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};                                            
        // 获取最后一张图片距离顶端的高度 + 它本身高度的一半
        $(window).scroll(function() {                      
            if(getSideHeight()){
                $.each(dataImg.data, function(index, value){
                    var pin = $("").addClass("pin").appendTo("#main");
                    var box = $("").addClass("box").appendTo(pin);
                    var img = $("").attr("src", "images/" + $(value).attr("src")).appendTo(box);
                });
                imgLocation();
            }
        });
 
    });
});
 
//获取最后一张图片的高度
function getSideHeight(){
    var box = $("pin");
    var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
    var documentHeight = $(document).height();          //获取当前窗口的高度
    var scrollHeight = $(window).scrollTop();           //获取滚动的距离
    return (lastImgHeight < documentHeight + scrollHeight) ? true:false;
}
 
//图片位置摆放
function imgLocation(){
    var box = $(".pin");                                //返回一个数值
    var boxWidth  = box.eq(0).width();                  //每张图片的宽度
    var num = Math.floor($(window).width()/boxWidth);   //一行能放的图片的个数
    var numArr = [];
    box.each(function(index, value){
        var boxHeight = box.eq(index).height();         //获取每张图片的高度
        if(index < num){                                 //第一排
            numArr[index] = boxHeight;
        }
        else{                                           //第二排
            var minboxHeight = Math.min.apply(numArr,numArr);
            var minIndex = $.inArray(minboxHeight, numArr);
            $(value).css({
                position: "absolute",
                top: minboxHeight,
                left: box.eq(minIndex).position().left
            });
            numArr[minIndex] += box.eq(index).height(); //新高度
        }
    });
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112298.html

jQuery实现瀑布流效果

摘要：何为瀑布流瀑布流，又称瀑布流式布局。最早采用此布局的网站是，逐渐在国内流行开来。四是服装款式设计资讯平台如看潮网等等。何为瀑布流：　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。 ...

mumumu 2019-08-20 18:13 评论0 收藏0
jQuery实现瀑布流效果

摘要：何为瀑布流瀑布流，又称瀑布流式布局。最早采用此布局的网站是，逐渐在国内流行开来。四是服装款式设计资讯平台如看潮网等等。何为瀑布流：　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。 ...

mgckid 2019-08-01 17:14 评论0 收藏0
懒加载、瀑布流和LightBox实现图片搜索效果

摘要：无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见，如果是则重复以上内容查看源码开始做一个小项目，算是对js和jQuery的一次练习吧。图片资源来自这个网站（上面有很多高清图片关键还是免费下载的）：https://unsplash.com/ 项目具体效果可以点这里：https://bjw1234.github.io/ima......

rainyang 2019-08-26 11:51 评论0 收藏0
瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置简单，功能强大，在上收获了。如果你想使用瀑布流提升网站体验，将是不错的选择。瀑布流，又称瀑布流式布局。需要注意的是，如果你需要加载图片，不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用插件。 Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验，Masonry...

waterc 2019-08-22 10:42 评论0 收藏0
浅谈瀑布流

摘要：瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。那么规则是什么呢下面通过图解来分析一下瀑布流的算法。看懂这个图示应该就能理解了瀑布流的原理算法。瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。瀑布流布局效果即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，...

番茄西红柿 2019-04-23 13:27 评论0 收藏0