当前位置：首页 > Web开发 > 正文

视觉表现为参差不齐的多栏布局

2024-03-31 Web开发

　　瀑布流，又称瀑布流式构造。是对照风行的一种网站页面构造，视觉表示为东倒西歪的多栏构造，跟着页面滚动条向下滚动，这种构造还会不停加载数据块并附加至当前尾部。最早给与此构造的网站是Pinterest，逐渐在国内风行开来。国内大大都清新站根基为这类气势派头。

瀑布流的应用：

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

应用案例：

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

实现效果

HTML代码：

<!DOCTYPE html> <html> <head> <title>瀑布流</title> <meta charset="utf-8"> <script type="text/javascript" src=""></script> <link type="text/css" href="http://www.mamicode.com/waterFall.css"> </head> <body> <div> <div> <div> <img src="#" alt="img1"> </div> </div> <div> <div> <img src="#" alt="img2"> </div> </div> <div> <div> <img src="#" alt="img3"> </div> </div> <div> <div> <img src="#" alt="img4"> </div> </div> <div> <div> <img src="#" alt="img5"> </div> </div> <div> <div> <img src="#" alt="img6"> </div> </div> <div> <div> <img src="#" alt="img7"> </div> </div> <div> <div> <img src="#" alt="img8"> </div> </div> <div> <div> <img src="#" alt="img9"> </div> </div> <div> <div> <img src="#" alt="img10"> </div> </div> <div> <div> <img src="#" alt="img11"> </div> </div> <div> <div> <img src="#" alt="img12"> </div> </div> <div> <div> <img src="#" alt="img13"> </div> </div> </div> <script type="text/javascript" src="http://www.mamicode.com/waterFall.js"></script> </body> </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 = $("<div>").addClass(‘pin‘).appendTo(‘#main‘); var box = $("<div>").addClass(‘box‘).appendTo(pin); var img = $("<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(); //新高度 } }); }

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31276.html

视觉表现为参差不齐的多栏布局

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢