0 Star 0 Fork 27

阿呆去哪了 / picfixed

forked from 惟忆代码 / picfixed 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

传统的瀑布流都是等宽不等高,在视觉上给人不整齐

传统的瀑布流

picfixed 是一个等高瀑布流,可以让图片或者div轻松实现等高瀑布流

等高瀑布流

使用方法:

例子1:
$('#box-img').fixedpic(300);//指定靠拢高度
<div id="box-img">
	<img src="img/1.jpg" alt="">
	<img src="img/img.webp" alt="">
	<img src="img/img (2).webp" alt="">
	<img src="img/img (3).webp" alt="">
	<img src="img/img (4).webp" alt="">
	<img src="img/img (5).webp" alt="">
	<img src="img/img (6).webp" alt="">
	<img src="img/img (7).webp" alt="">
	<img src="img/img (8).webp" alt="">
	<img src="img/img (9).webp" alt="">
	<img src="img/img (10).webp" alt="">
	<img src="img/img (11).webp" alt="">
	<img src="img/img (12).webp" alt="">
	<img src="img/img (13).webp" alt="">
	<img src="img/img (14).webp" alt="">
	<img src="img/img (15).webp" alt="">
	<img src="img/img (16).webp" alt="">
	<img src="img/img (16).webp" alt="">
</div>
<div style="clear: both;">
<div>例子2:</div>
<div>$('#box-img2').fixedpic(350,990);//指定靠拢高度,宽度</div>
<div id="box-img2">
	<img src="img/1.jpg" alt="">
	<img src="img/img.webp" alt="">
	<img src="img/img (2).webp" alt="">
	<img src="img/img (3).webp" alt="">
	<img src="img/img (4).webp" alt="">
	<img src="img/1.jpg" alt="">
	<img src="img/img (6).webp" alt="">
	<img src="img/img (7).webp" alt="">
	<img src="img/img (8).webp" alt="">
	<img src="img/1.jpg" alt="">
	<img src="img/img (10).webp" alt="">
	<img src="img/img (11).webp" alt="">
	<img src="img/img (12).webp" alt="">
	<img src="img/img (13).webp" alt="">
	<img src="img/img (14).webp" alt="">
	<img src="img/img (15).webp" alt="">
	<img src="img/1.jpg" alt="">
	<img src="img/img (16).webp" alt="">
</div>
<div style="clear: both;">
<div>例子3: 针对DIV</div>
<div>$('#box-div').fixedpic(350,990);</div>
<div id="box-div">
	<div style="width:124px;height:300px;background-color: #ccc;padding:3px;">1</div>
	<div style="width:235px;height:367px;background-color: #233">2</div>
	<div style="width:1110px;height:987px;background-color: #099">3</div>
	<div style="width:821px;height:334px;background-color:#309">4</div>
	<div style="width:314px;height:200px;background-color:#639">5<div>更多说明</div></div>
	<div style="width:327px;height:399px;background-color:#949">6</div>
	<div style="width:500px;height:800px;background-color:#179">7</div>
	<div style="width:600px;height:800px;background-color:#739">8</div>
	<div style="width:800px;height:600px;background-color:#236">9</div>
	<div style="width:480px;height:720px;background-color:#547">0</div>
	<div style="width:300px;height:300px;background-color:#362">11</div>
</div>
<div style="clear: both;">
<div>例子4: 设置边框</div>
<div>$('#box-div2').fixedpicSet({
    paddingTop:11,paddingLeft:11,paddingRight:0,paddingBottom:0,
    borderTop:1,borderLeft:1,borderRight:1,borderBottom:1,
    borderStyle:"dotted"
}).fixedpic();</div>
<div id="box-div2">
	<div style="width:124px;height:300px;background-color: #ccc;padding:3px;">1</div>
	<div style="width:235px;height:367px;background-color: #233">2</div>
	<div style="width:1110px;height:987px;background-color: #099">3</div>
	<div style="width:821px;height:334px;background-color:#309">4</div>
	<div style="width:314px;height:200px;background-color:#639">5<div>更多说明</div></div>
	<div style="width:327px;height:399px;background-color:#949">6</div>
	<div style="width:500px;height:800px;background-color:#179">7</div>
	<div style="width:600px;height:800px;background-color:#739">8</div>
	<div style="width:800px;height:600px;background-color:#236">9</div>
	<div style="width:480px;height:720px;background-color:#547">0</div>
	<div style="width:300px;height:300px;background-color:#362">11</div>
</div>
<script src="jquery-1.8.3.min.js"></script> <script src="fixedpic.js"></script> <script> $('#box-img').fixedpic(300); $('#box-img2').fixedpic(350,990); $('#box-div').fixedpic(350,990);

$('#box-div2').fixedpicSet({ paddingTop:11,paddingLeft:11,paddingRight:0,paddingBottom:0, borderTop:1,borderLeft:1,borderRight:1,borderBottom:1, borderStyle:"dotted" }).fixedpic(340,990); </script>

空文件

简介

实现等高等宽瀑布流的jquery插件, 适合各类图片网站. keyword: 图片瀑布流 等高瀑布流 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/xsj1287618656/picfixed.git
git@gitee.com:xsj1287618656/picfixed.git
xsj1287618656
picfixed
picfixed
master

搜索帮助

14c37bed 8189591 565d56ea 8189591