开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js不规则图片排列特效

JavaScript 不规则图片排列特效通常指的是使用 JavaScript 和 CSS 技术来创建一种视觉上吸引人的图片布局，其中图片不是按照传统的网格或直线排列，而是以更加自由和动态的方式展示。这种特效可以增强用户的视觉体验，使网站或应用看起来更加现代和有趣。

基础概念

这种特效通常涉及到以下几个基础概念：

HTML 结构：用于承载图片的容器和图片元素本身。
CSS 样式：用于定义图片的基本样式和布局。
JavaScript 脚本：用于动态地控制图片的位置和排列方式。

相关优势

视觉吸引力：不规则的排列方式可以打破常规，吸引用户的注意力。
用户体验：动态的布局可以增加页面的互动性和趣味性。
创意表达：设计师可以通过这种特效来表达独特的创意和风格。

类型与应用场景

瀑布流布局：图片按照列的形式排列，每列的高度根据图片的实际高度动态调整，常用于图片分享网站。
随机散布：图片随机分布在页面上，常用于艺术画廊或摄影作品展示。
拼贴效果：图片被裁剪成小块并以拼贴的形式排列，常用于创意广告或社交媒体背景。

示例代码

以下是一个简单的 JavaScript 不规则图片排列特效示例，使用了 CSS Grid 和 JavaScript 来实现随机散布的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不规则图片排列</title>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
  }
  .item {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }
  .item:hover {
    transform: scale(1.05);
  }
</style>
</head>
<body>
<div class="container" id="imageContainer">
  <!-- 图片将通过 JavaScript 动态添加到这里 -->
</div>

<script>
  const container = document.getElementById('imageContainer');
  const images = [
    'image1.jpg', 'image2.jpg', 'image3.jpg', // ... 更多图片路径
  ];

  function getRandomPosition(element) {
    const maxX = window.innerWidth - element.offsetWidth;
    const maxY = window.innerHeight - element.offsetHeight;
    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);
    return { x: randomX, y: randomY };
  }

  images.forEach(imageSrc => {
    const imgElement = document.createElement('img');
    imgElement.src = imageSrc;
    imgElement.classList.add('item');
    const position = getRandomPosition(imgElement);
    imgElement.style.position = 'absolute';
    imgElement.style.left = `${position.x}px`;
    imgElement.style.top = `${position.y}px`;
    container.appendChild(imgElement);
  });
</script>
</body>
</html>

遇到的问题及解决方法

问题：图片重叠或者排列过于密集，影响美观和用户体验。

解决方法：

使用 JavaScript 计算每个图片的位置时，确保它们之间有一定的间距。
可以引入碰撞检测算法，避免图片之间的重叠。
调整 CSS Grid 的列数和间距，以适应不同的屏幕尺寸和图片数量。

通过上述方法，可以有效地创建出不规则的图片排列特效，同时保证页面的美观性和可用性。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：实现的代码如下：原生JS实现图片爆炸特效 var index = 0; var zIndex = 9999999; //本地图片路径...function show(x, y) { var R = x; var T = y; //爆炸前生成下一张图片...zIndex--; index++; //如果三张不同的图片切换完，切换到第一张 if (imgIndex

18.5K2 0

原生JS实现切换不同图片的特效

分享一个由原生JS实现的图片切换特效，效果如下：原理比较简单，实现的代码如下：原生JS实现切换不同图片的特效 <style

17.8K1 0

原生JS实现图片跑马灯特效

今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下：实现的代码如下，欢迎大家复制粘贴。原生JS...实现图片跑马灯特效 * { padding: 0; margin...oUp = getClass('up'); //获取向下箭头 var oDown = getClass('down'); //获取图片容器...('ul')[0]; //获取图片列表项 var oLi = oUl.getElementsByTagName('li'); var

5.6K1 0

添加js抖动特效-鼠标悬停图片文字抖动

添加js抖动特效-鼠标悬停图片文字抖动作者：matrix 被围观: 2,203 次发布时间：2013-08-13 分类：Wordpress 兼容并蓄 | 无评论 » 这是一个创建于 3306...为WordPress添加js抖动特效效果不错！...在header.php添加代码： js/jquery-1.4.2.min.js"> js/jquery.doudong.js"> //抖动特效...，如果加载了JQ库就不用加载jquery-1.4.2.min.js文件。

5.1K3 0

卡牌特效: svg不规则倒计时动效

导语：直播过程中，往往会有各种动画特效增强直播效果，近期需求中，设计要求在企鹅电竞PC官网上实现一种卡牌效果，在不规则图片上叠加倒计时效果。...而svg的兼容性好，基于XML，比较轻量，而且当前特效的XML结构比较简单，不会影响页面性能，鉴于当前页面已经有多处特效使用canvas绘制，基于性能考虑，本次方案不采用canvas实现。...，所支持的图片类型非常的广泛，可以是url()静态图片资源，格式包括JPG，PNG以及SVG，使用mask-image我们可以遮罩出任意我们想要的图形，非常强大。...[ css mask] 2. svg蒙版从上面这个的例子，我们可以看出，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。...[ 不规则倒计时动效 ] 组件化，实现各种不规则图形的倒计时效果基于以上的实现，已经实现了一个固定长宽，固定图，固定透明度的不规则倒计时效果，但是在实际的应用中，我们需要兼容各种不同尺寸的图形，因此需要把它抽象成组件

2.2K3 0

使用Js实现有趣的拖动黑白对比图片特效

在有一些网站示例产品里面,为了比较处理之前和之后的一个效果对比图那么就可以使用这个特效示例效果原生Js实现有趣的拖动黑白对比图片特效 <style...background-size: cover; } #inked-painted:hover { cursor: col-resize; } Vue版本实现,与原生Js...$refs, 方法写在methods里面,其他的与原生Js没有什么区别

4164 1

Android瀑布流照片墙实现，体验不规则排列的美感

首先还是讲一下实现原理，瀑布流的布局方式虽然看起来好像排列的很随意，其实它是有很科学的排列规则的。整个界面会根据屏幕的宽度划分成等宽的若干列，由于手机的屏幕不是很大，这里我们就分成三列。...每当需要添加一张图片时，会将这张图片的宽度压缩成和列一样宽，再按照同样的压缩比例对图片的高度进行压缩，然后在这三列中找出当前高度最小的一列，将图片添加到这一列中。...这里我事先在百度上搜索了很多张风景图片，并且为了保证它们访问的稳定性，我将这些图片都上传到了我的CSDN相册里，因此只要从这里下载图片就可以了。...，对图片的可见性进行检查，如果图片已经离开屏幕可见范围，则将图片替换成一张空图。...当这些图片又重新变为可见的时候，只需要再从LruCache中将这些图片重新取出即可。如果某张图片已经从LruCache中被移除了，就会开启一个LoadImageTask，将这张图片重新加载到内存中。

2.9K5 0

dotnet OpenXML 图片特效的 BiLevel 黑白特效修改图片颜色

在 Office 中，如 PPT 和 Word 可以不对原图修改的前提下，通过叠加特效的方式，提供对图片的视觉输出进行修改的方法，本文将介绍 ECMA 376 里面的第 20.1.8.11 章的 Bi-Level...(Black White Effect) 的用法和功能如下图是一张图片，这张图片有颜色的，这张图片是我瞎找的，如果有版权问题还请告诉我 ?...如果按照 ECMA-376 的 biLevel (Black White Effect) 功能，给图片加上了 Bi-Level 特效，如以下代码，可以看到图片变成黑白特效有介绍使用方法。...在 a:biLevel 里面的属性只有 thresh 一个属性，这个属性的含义是如果图片的每个像素点，如果像素点的亮度大于或等于给定的 thresh 也就是 Threshold 阈值那么将显示白色，否则将显示黑色

1.6K4 0

js拖拽自动排列

上一次写了拖拽，其实主要还是想实现拖拽之后实现自动排列，跟手机屏幕那样移动图标可以自动排列，先看效果： ? 很常见的一个效果，先说一下思路：每一个元素都是绝对定位，初始化的时候是通过js去排列。...定义了一个数组，每个元素的字段： {el: elArr[i], sort: i, index: i} el是这个元素，用于排列，也就是改变top和left，sort是元素排列的位置，index是当前元素的...} }; elList[item.index].sort = moveIndex; moveItem(elList); } } //排列

5.7K2 0

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover 作者：matrix 被围观: 1,771 次发布时间：2013-09-20 分类：Wordpress 兼容并蓄 |...onamae.com的25号免费域名没抢到，倒是看到onamae上的一个图片闪光特效好奇，这就扒了。...作者：http://h2ham.seesaa.net 实际效果，文字说明：假设图片被指定加载此js特效。...二.在header中加入上面的js代码。 js代码说明：第5行中.post img指需要加载此js特效的元素。...这里是class为post的 img标签加载特效，也就是文章内容的图片，鼠标移上去就会与闪烁的效果。当然这里的.post img也可以改为css中的id或者其他的class和标签等都可以的。

2.5K3 0

图片特效Auto Highslide插件

图片特效Auto Highslide插件作者：matrix 被围观: 1,596 次发布时间：2013-02-22 分类：Wordpress 兼容并蓄 | 无评论 » 这是一个创建于 3478...图片特效Auto Highslide插件之前没用过 PhilNa2自说Me话扩展主题的时候一直都用的此插件，很美观。个人觉得比主题自带的灯箱效果还好。

1.3K2 0

Android --- 图片的特效处理

Android --- 图片处理的方法转换 - drawable To bitmap 缩放 - Zoom 圆角 - Round Corner 倒影 - Reflected bitmapPrcess

1.4K3 0

dotnet OpenXML 图片特效的 Color Change Effect 特效修改图片颜色

在 Office 中，如 PPT 和 Word 可以不对原图修改的前提下，通过叠加特效的方式，提供对图片的视觉输出进行修改的方法，本文将介绍 ECMA 376 里面的第 20.1.8.16 章的 ClrChange...日常这个特效用来去背景如下图是一张图片，这张图片有背景色，这张图片是我瞎找的，如果有版权问题还请告诉我 ? 默认放入到 PPT 里面的效果如下 ?...而如果按照 ECMA-376 的 ClrChange (Color Change Effect) 功能，给图片加上了 ClrChange 特效，如以下代码，可以看到背景被去掉特效的定义如下，其实咱上面的代码没有写全，有一个叫 useA 的属性被忽略。...这个特效更多是作为去背景使用，在 PPT 里面的图片的颜色，设置透明色用上本文的属性是依靠 dotnet OpenXML 解压缩文档为文件夹工具工具协助测试的，这个工具是开源免费的工具，欢迎小伙伴使用

1.5K2 0

js 数组倒序排列

array[array.length-1-i]=temp; } console.log(array); // 输出： ["你", "欢", "喜", "我"] 延申：字符串倒序排列

5.2K1 0

css实现图片横向排列滚动

.imageList{ overflow-x: auto; overflow-y: hidden; height...

5.8K7 0

js 实现下雪特效

直接上代码放到你的script 标签中具体效果参考博客页面 (function($){ $.fn.snow = function(options){ v...

22.9K1 0

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效

20.4K0 1

JQuery实现图片拖拽缩放特效

给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下：实现代码如下，欢迎大家复制粘贴。基于JQuery实现的图片拖拽缩放特效...id="dot"> js

8.3K1 0

javascript图片展示墙特效

> 217 何问起海报走廊首页特效...="wrap" id="wrap">何问起 219 js.../15/images/data.js"> 220 221 function g(selector...className.replace(/\s*i_back\s*/, " ") } elem.className = cls }; 222 223 224 网页特效

4.5K2 0

JS根据列表排列对象数组

] const sortInfo = ['f','c','b'] nodeData_.sort((a, b) => {

4.5K4 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭