个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我在元素中使用水平滚动图片库。
最近滚动停止工作，我一直在试图找出原因。最终我决定回到元素这部分的源代码并开始工作，但我什至无法运行它。
我一定是做错了什么——有什么想法吗？
我的代码:
HTML
<head>
<script type="text/javascript" src="./jquery-2.0.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./waterfall3.css" />
<script type="text/javascript" src="./waterfall.js"></script>
</head>
<body>
<div class="media">
<div class="imageContainer">
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>
<div class="image"><a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a></div>
</div>
</div>
</body>
JS
var imageWidth = 300;
$(".imageContainer").width($(".image").length*imageWidth);
CSS
.media
{
width: 300px;
height: 288px;
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}
.image
{
float: left;
height: 240px;
width: 300px;
margin: 0;
text-align:center;
border: 0px solid white;
}
.imageContainer
{
float:left;
}
最佳答案
把这个js放到你的js文件里
<script type="text/javascript">
$(document).ready(function(e) {
var imageWidth = 300;
$(".imageContainer").width($(".image").length*imageWidth);
});
</script>
这对我有用
看这个演示
关于javascript - 短脚本(<50 行)适用于 jfiddle 但不适用于浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20188790/
25
4
0
我正在尝试了解如何将以下 JFiddle 示例转换为单个 html 网页: http://jsfiddle.net/zqa511e9/ 哪里做错了？样式和 javascript 代码都没有反射(ref
我是 AJAX 编程新手，但我在 jfiddle 上找到了一个与我想要实现的目标非常接近的示例。然而我无法让它发挥作用。我在标题中放置了对同一版本 jquery 的引用，但是当我点击“我的版本”上的提
我是 bootstrap 的新手，我被卡住了。我相信我正在导入正确的脚本以在我的页面上使用 Bootstrap ，但是每当我点击“阅读”按钮时，唯一发生的事情就是“#”被添加到我的网址(侧面导航栏应该
我想制作一个水平下拉菜单，很像博闻网的主菜单:http://home.howstuffworks.com/community-living 注意子菜单如何覆盖水平主菜单栏的整个宽度，而不是在垂直列表中
这是我的简单代码 http://jsfiddle.net/6hLf6/1/ 当我在我的 IE 上打开 jsfiddle 时，它运行良好。 但是当我在本地打开代码时，它看起来像这样: 我正在使用 I
我有一个文件阅读器，可以在 jfiddle 上运行，但不能在任何浏览器中运行。我使用所有最新的浏览器。它会让我选择文件，但之后什么也没有发生。我对 javascript 很陌生。 javacript
几个小时后仍在尝试解决此问题。该脚本在 jfiddle 中运行:http://jsfiddle.net/uCcYw/3/ ,将闪光效果应用于add_item (simplecart_shelfitem
这只是几行代码:http://jsfiddle.net/z7bHt/ HTML: JavaScript: $("#bowleft").mouseenter(function(){ con
我已经尝试了几个小时来找出如何摆脱出现在我的 CSS 菜单上的奇怪框。有两层子菜单。第二级子菜单位于我想要它的父菜单右侧的位置，但是一旦它出现 - 悬停时 - 父菜单下方也会出现一个相同高度的框。这个
抱歉，如果这真的很初级，但我有一个打字机博客，上面有一个水平导航菜单。一些子菜单项的名称非常长(每个客户不可更改)——幸运的是它们都在一个“部分”中。由于宽度样式适用于所有子菜单，因此仅加宽子菜单对模
我在元素中使用水平滚动图片库。 最近滚动停止工作，我一直在试图找出原因。最终我决定回到元素这部分的源代码并开始工作，但我什至无法运行它。 我一定是做错了什么——有什么想法吗？ the fiddle 我
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 7 年前。 编辑问题以包含 desired behavior, a specific probl
我需要 float 一个无序列表。问题是:我做不到。我找到了一个完全符合我需要的 jfiddle(编码器制作了一个列表，使其侧面与上面的一些文本对齐) 这是更新后的 jfiddle 链接: https
我是一名优秀的程序员,十分优秀！