flagstone实现瀑布流布局拖拽排序过渡动画效果代码
代码语言:html
所属分类:瀑布流
代码描述:flagstone实现瀑布流布局拖拽排序过渡动画效果代码,可设置列数、间距、方向等。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans"); *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html { background: #777; } body { font: 400 18px/1.4 "Open Sans", sans-serif; margin: 0 2vw; background: inherit; min-height: 1100px; } h1 { margin: 10px; padding-top: 30px; font-size: 48px; color: #aaa; text-shadow: 0 0 5px #5d646e; text-align: center; } h1 a { text-decoration: none; color: inherit; } .slogan { display: block; font-size: 10px; text-shadow: initial; text-transform: uppercase; letter-spacing: 8px; text-indent: 8px; } .quick-info { display: block; margin: 10px 0; font-family: sans-serif; font-size: 11px; text-shadow: initial; text-align: center; text-transform: uppercase; color: #aaa; } button { border: none; outline: none; } p { margin-top: 1em; } .adjust { position: fixed; z-index: 100; top: -290px; left: 0; width: 350px; height: 290px; border-radius: 0 0 10px 0; padding: 10px 10px 0 10px; background-color: #aaa; color: #fff; font-size: 12px; transition: top 0.25s ease; box-shadow: 4px 4px 4px 0 #5d646e; } .adjust.active { top: 0px; } .adjust .toggle-widget { padding-top: 10px; margin-top: 10px; font-size: 16px; color: #ff0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .adjust .toggle-widget:after { content: ""; display: table; clear: both; } .adjust .toggle-widget p { float: left; margin: 0; } .adjust .toggle-widget button { float: right; background: none; line-height: 1em; font-size: 18px; color: inherit; } .adjust table { table-layout: fixed; border-collapse: collapse; } .adjust th { border-bottom: 1px solid #fff; padding-bottom: 4px; font-weight: 800; } .adjust th:first-of-type { width: 50%; } .adjust td { padding-top: 4px; } .adjust tfoot button { padding: 5px; background: #ff0; color: #5d646e; cursor: pointer; } .adjust tfoot button:focus { box-shadow: 2px 2px 4px 0 #000; } .adjust input, .adjust textarea { color: #5d646e; } .adjust textarea { width: 100%; height: 33px; } .add-card { margin-bottom: 10px; padding: 5px; background: #ff0; color: #5d646e; cursor: pointer; } .add-card:focus { box-shadow: 2px 2px 4px 0 #000; } article { margin-bottom: 100px; background: #aaa; } article section { overflow-y: auto; padding: 15px; background-image: linear-gradient(to bottom right, #5d646e, #868080); color: #fff; } img { width: 100%; } iframe { width: 100%; height: 56.25%; } .p-animate { overflow: hidden; max-height: 40px; transition: max-height 0.25s ease; } .p-animate.active { max-height: 200px; } .p-animate.active + .show-more { display: none; } .p-animate.active + .show-more + .show-less { display: inline-block; } .p-animate + .show-more { display: inline-block; } .p-animate + .show-more + .show-less { display: none; } .toggle-more { padding: 5px; background: #ff0; color: #5d646e; cursor: pointer; } .toggle-more:focus { box-shadow: 2px 2px 4px 0 #000; } .highlight { background: #ff0; color: #5d646e; } .flagstone-remove { position: absolute; top: 0; right: 10px; margin: 0; opacity: 0.25; padding: 0; background: none; cursor: pointer; font-size: 24px; } .flagstone-remove:focus, .flagstone-remove:hover { opacity: 1; } .flagstone-0-bed.flagstone-dragover { box-shadow: inset 0 0 4px 4px #ff0; } .flagstone-drag { filter: grayscale(1) blur(4px); opacity: 0.25; } .flagstone-left { box-shadow: -8px 0 4px -4px #ff0; } .flagstone-right { box-shadow: 8px 0 4px -4px #ff0; } </style> </head> <body > <div class="adjust"> <table> <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>margin:</td> <td><input type="number" min="0" max="1000" disabled id="adjust-margin"></td> </tr> <tr> <td>bedPadding:</td> <td><input type="number" min="0" max="1000" value="10" id="adjust-bed-padding"></td> </tr> <tr> <td>stonesMargin:</td> <td><input type="number" min="0" max="1000" value="10" id="adjust-stones-margin"></td> </tr> <tr> <td>minWidth:</td> <td><input type="number" min="0" max="1000" value="280" id="adjust-min-width"></td> </tr> <tr> <td>maxColumns:</td><td><input type="number" min="0" max="1000" value="5" id="adjust-max-columns"></td> </tr> <tr> <td>dragAndDrop:</td> <td><input type="checkbox" checked id="adjust-drag-and-drop"></td> </tr> <tr> <td>dropCallback:</td> <td><textarea id="adjust-drop-callback">function(dragElem, targetElem) { return true; }</textarea></td> </tr> <tr> <td>callback:</td> <td><textarea id="adjust-callback">function(elem, index) { if (index === 3) { elem.classList.add('highlight'); } else { elem.classList.remove('highlight'); } }</textarea></td> </tr> </tbody> <tfoot> <tr> <td><button class="apply-adjustments">Apply</button></td> <td></td> </tr> </tfoot> </table> <div class="toggle-widget"> <p>Toggle Adjust Widget</p> <button>⇕</button> </div> </div> <button class="add-card">Inject a card</button> <article style="visibility:hidden;"> <section class="flagstone-drag-handle"> <h2>1</h2> <button class="flagstone-remove">×</button> <p class="p-animate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ducimus unde amet quam omnis aliquid aliquam culpa, explicabo ut officia illum doloremque debitis, fugiat eos. Hic cupiditate sapiente placeat temporibus.</p> <button class="toggle-more show-more flagstone-resize-height">Show More</button> <button class="toggle-more show-less flagstone-resize-height">Show Less</button> </section> <section class="flagstone-drag-handle"> <h2>2</h2> <button class="flagstone-remove">×</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ducimus unde amet quam omnis aliquid aliquam culpa, explicabo ut officia illum doloremque debitis, fugiat eos. Hic cupiditate sapiente placeat temporibus.</p> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="" style="float:left;width:80px;margin:10px 10px 10px 0;"/> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ducimus unde amet quam omnis aliquid aliquam culpa, explicabo ut officia illum doloremque debitis, fugiat eos. Hic cupiditate sapiente placeat temporibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ducimus unde amet quam omnis aliquid aliquam culpa, explicabo ut officia illum doloremque debitis, fugiat eos. Hic cupiditate sapiente placeat temporibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ducimus unde amet quam omnis aliquid aliquam culpa, explicabo ut officia illum doloremque debitis, fugiat eos. Hic cupiditate sapiente placeat temporibus.</p> </section> <section class="flagstone-drag-handle"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0