js 使用masonry插件快速实现瀑布流布局效果自适应容器大小样式

最新推荐文章于 2024-08-19 11:32:15 发布
最新推荐文章于 2024-08-19 11:32:15 发布
阅读量661 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540711/article/details/117040707
版权

先看效果图

在这里插入图片描述

参考demo

<!DOCTYPE html>
<html>
<head>
	<title>瀑布流开发</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
</head>
<style type="text/css">
	.grid{
		width: 1200px;
	}
	.grid-item {
		float: left;
		width: 300px;
		border: 2px solid hsla(0, 0%, 0%, 0.5);
	}
</style>
<body>
<div class="grid">
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t8.jpg">
  </div>
  <div class="grid-item">
  	<img src="https://www.jq22.com/demo/jquery-pubu-150108182449/images/t7.jpg">
  </div>
</div>
<script type="text/javascript">
	const $grid = $('.grid').masonry({
		itemSelector: '.grid-item',
	});

	$grid.imagesLoaded().progress( function() {
	  $grid.masonry('layout');
	});
</script>
</body>
</html>

使用细节

	# masonry插件基于jquery开发，所以先要引入jquery插件
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	# 瀑布流排序插件
	<script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
	# 监听图片加载插件，此插件可用于监听图片加载状态
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>

# 初始化瀑布流插件 $('.grid')代表瀑布流的容器 ，'.grid-item' 代表需要进行瀑布流排序的item，注意grid-item必须要有float:left样式，更多细节参考官网手册
	const $grid = $('.grid').masonry({
		itemSelector: '.grid-item',
	});

# 监听瀑布流dom下的图片状态，当图片加载成功时，再进行排序
	$grid.imagesLoaded().progress( function() {
	  $grid.masonry('layout');
	});
ganganlee
关注
masonry.min.js
10-17
jQuery 实现无限滚动技术的js文件
bootstrap配合Masonry插件实现瀑布式布局
11-30
最终的效果是，当浏览器窗口大小变化时，`.box`元素会根据Bootstrap的栅格系统自动调整为三列，并通过Masonry插件填充空隙，实现无缝的瀑布流布局。 总结一下，Bootstrap和Masonry结合使用，可以轻松创建响应式且...
Masonry JS瀑布流布局
夕空
05-13 845
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Masonry JS瀑布流布局</title> <style> li{list-style:none;} ul{ width:90%; margin:0 auto; }...
【JavaScript脚本宇宙】美化网格布局：Isotope和Masonry让你的网页焕然一新
记录我的学习历程
07-06 782
本文将介绍6个实用的JavaScript库，涵盖了无限滚动、响应式网格布局、元素可见性监测、图片延迟加载、虚拟列表、以及网格布局美化等主题。每个库都有详细的简介、安装配置说明和API概览，帮助开发者快速上手和应用这些功能强大的工具。
瀑布流布局浅析+常用插件介绍（转&改编）
weixin_34391445的博客
01-08 467
http://ued.taobao.com/blog/2011/09/14/waterfall/ “瀑布流布局”随着pinterest网的流行而出名，现在国内使用这种风格布局的网站也越来越多，比如说Mark之，蘑菇街，点点网，哇哦等等。 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pin...
自适应瀑布流布局，masonry.pkgd.min.js插件的使用
qq_38188228的博客
03-17 1286
使用方式 1.在页面底部引入 imagesloaded.pkgd.min.js 2.同样引入masonry.pkgd.min.js 点击下载使用的js文件 直接上代码块 <style> .grid { padding: 20px; } .grid__item{ margin-bottom: 20px; float: left; width: 220px; } .grid__item img { max-width: 100% } </style> <d
js插件---瀑布流Masonry
weixin_34418883的博客
09-05 122
js插件---瀑布流Masonry 一、总结 一句话总结：还是要去看官网，比amazeui上面介绍的详细很多 1、瀑布流的原理是什么？ 给外层套好相对定位，里面的每一个弄好绝对定位，然后计算出每一个的left和top即可。 2、瀑布流如何使用？ a、指定外层，这里是#container b、给里面的每一个套上.item c、指定不同列之间的间距，columnW...
jquery瀑布流布局(masonry.js)
wangchaoqi1985的博客
08-14 3799
这样参差不齐的多栏布局，叫“方砖石布局”，和“瀑布流布局”，很多网站都有使用这样的布局，比如：淘宝的哇哦、花瓣网、蘑菇街 这里，我们仅使用瀑布流插件实现当页内容的排列。 那这插件到底有什么用呢？请
jquery瀑布流效果响应式自适应手机电脑端jaliswall.js
06-30
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于展示图片或者内容卡片，使得它们在页面上像瀑布一样自然下落，每行的元素数量不固定，随着浏览器窗口大小的变化而自适应调整。这种布局方式既美观又...
jQuery Masonry瀑布流插件使用方法详解
11-26
jQuery Masonry是一款强大的JavaScript插件，它允许开发者创建具有瀑布流布局效果的网页，这种布局方式使得内容元素能够像砖石一样自适应地填充页面，从而实现视觉上的吸引力和良好的用户体验。以下是对jQuery ...
js自定义瀑布流布局插件
10-19
总的来说，自定义瀑布流布局插件提供了一种便捷的方式，允许开发者在网页中快速实现动态的、响应式的瀑布流布局，同时允许根据项目需求进行一定程度的定制。在实际应用中，还可以结合其他技术，如懒加载（lazy ...
最小的响应式动态网格瀑布流布局js插件
07-11
最小的响应式动态网格瀑布流布局js插件
Masonry：一款很好用的jquery网页瀑布流布局插件
05-15
Masonry可帮助开发者快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。 http://blog.csdn.net/my_yang/article/details/7567561
jquery插件masonry.js实现竖列状图片排列特效
03-31
NULL 博文链接：https://axl234.iteye.com/blog/1390404
vue 实现瀑布流布局的 组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
愿我如星君如月 ... 夜夜流光相皎洁 ...
05-16 4923
转自：http://www.fly63.com/article/detial/1134 瀑布流作为当前比较流行的一种网页布局方式，在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果，该布局随着页面滚动，数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件，大家根据需求来进行选择。 一、vue-waterfall waterfall是一个vue.js瀑布流布局组...
Vue-Waterfall-Plugin：打造流畅的瀑布流效果
gitblog_00056的博客
03-29 1355
Vue-Waterfall-Plugin：打造流畅的瀑布流效果 项目地址:https://gitcode.com/heikaimu/vue-waterfall-plugin 在前端开发中，瀑布流布局是一种常见的展示方式，尤其适用于图片或卡片元素的展示，如 Pinterest。Vue.js，作为一款强大的JavaScript框架，同样可以轻松实现这一功能。今天，我们要推荐的就是一个专门为Vue设计的...
开源瀑布流插件Masonry.js: 轻松在你的网站实现瀑布流布局
最新发布
趣谈前端
08-19 1008
嗨, 大家好, 我是徐小夕.之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：Nocode/Doc，可视化+ 零代码打造下一代文件编辑器爆肝1000小时, Dooring零代码搭建平台3.5正式上线可视化表单&试卷搭建平台技术详解最近在做无代码平台的模版列表的时候, 需要使用瀑布流布局, 类似下面这种:为了研究市面上比较成熟的瀑布流方案, ...
玩转Masonry JS库来实现瀑布流Web效果
栾砚强的专栏
02-18 4315
工作项目中需要制作个Mobile上的Web App的展示，方便快捷访问和评价反馈。在展示页面能看到应用展示图，点击进入Web应用。我不是前端开发者，对HTML, CSS, JS这三剑客仅仅是略知一二。于是先规划了个简单的设计，感觉瀑布流的图片展示方式比较美观，同时布局的高度也一定灵活性。就按照Pinterest Android/IOS和花瓣Mobile Web App的目标开始实现。 第
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值