作者：lp-阳光切割了记忆的角度 | 来源：互联网 | 2021-11-13 14:52
本文实例为大家分享了js瀑布流布局学习资料，供大家参考，具体内容如下
特点： 实现方式：
一、JS实现瀑布流
index.html:页面结构
layout.css:页面元素样式
*{
pdding:0;
margin:0;
}
div#main{
position: relative;
}
div.box{
padding:15px 0 0 15px;
float: left;
}
div.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
height:auto;
width:165px;
}
waterfall.js
window.Onload=function(){
waterFall('main','box');
//模拟后台相应数据json
var dataInt={
"data":
[
{"src":"0.jpg"},
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"}
]
}
window.Onscroll=function(){
if(checkScrollSlide){
//将数据块渲染到当前页面的尾部
var oParent=document.getElementById("main");
for(var i=0;i
二、JQuery
$( window ).on( "load", function(){
waterfall('main','pin');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.Onscroll=function(){
if(checkscrollside()){
$.each( dataInt.data, function( index, value ){
var $oPin = $('').addClass('pin').appendTo( $( "#main" ) );
var $oBox = $('
').addClass('box').appendTo( $oPin );
$('
').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
});
waterfall();
};
}
});
/*
parend 父级id
pin 元素id
*/
function waterfall(parent,pin){
var $aPin = $( "#main>div" );
var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
//oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
$( "#main" ).css({
'width:' : iPinW * num,
'margin': '0 auto'
});
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
$aPin.each( function( index, value ){
var pinH = $aPin.eq( index ).height();
if( index
div" );
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop = $( window ).scrollTop()//注意解决兼容性
var documentH = $( document ).height();//页面高度
return (lastPinH
三、CSS多栏布局
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
}
/*数据块 砖块*/
.container div{width:160px;
margin:4px 0;}
【css3和js实现方法比较】 --css3方式--
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
推荐阅读
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ...
[详细]
蜡笔小新 2023-12-13 10:50:43
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
在Android中解析Gson解析json数据是很方便快捷的，可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时，默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而，当我们自己定义的java对象里的属性名与json里的字段名不一样时，我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法，并给出了具体的使用示例。 ...
[详细]
蜡笔小新 2023-12-11 19:04:09
本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
本文介绍了在express工程中如何调用json数据，包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ...
[详细]
蜡笔小新 2023-12-10 13:09:24
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
本文介绍了如何在Jquery中通过元素的样式值获取元素，并将其赋值给一个变量。提供了5种解决方案供参考。 ...
[详细]
蜡笔小新 2023-12-10 04:03:11
本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法，包括使用jQuery的选择器和遍历方法。通过这些方法，可以方便地获取到所需的元素，并进行相应的操作。 ...
[详细]
蜡笔小新 2023-12-09 10:26:04
lp-阳光切割了记忆的角度
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号