html+css+javascript常用实例之 文章列表

<!--块元素-->
<div class="div_content" id="div_content">
<!-- <div class="div_article" id="div_article" onclick="displayDate()">
<h4>title</h4>
<div>
<p class="article">content</p>
<img src="images/test2.jpg" />
</div>
</div> -->
</div>

.div_content{
margin-bottom: 50px;
}
/**
* 内容类选择器
* relative 相对定位,相对其正常位置
* absolute 绝对定位,相对于最近的已定位父元素
*/
.div_content .div_article{
padding: 10px;
}
/**
* 文章块级元素
*/
.div_content .div_article div {
display: flex;
}
/**
* flex-shrink: 0 来固定元素不被挤压,解决父控件为flex,子控件宽高不起用的问题
* *******************************************************************************************************
* object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
* object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
* *******************************************************************************************************
* 文章内容-右边图片
* display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：
* none：隐藏元素，不保留元素显示时的空间。
* block：块方式显示元素。
* inline：以内嵌方式显示元素。
* *******************************************************************************************************
* visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：
* inherit：继承父元素的visibility属性设置。
* hidden：隐藏元素，但保留其所占空间。
* visible：显示元素(默认值)。
*/
.div_content div img {
flex-shrink:0;
width: 100px;
height: 58px;
object-fit: cover;
/* display: none; */
}
/**
* 文本显示最多两行
* **************************************************************************
* text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。
* clip	剪切文本
* ellipsis	显示省略符号 ... 来代表被修剪的文本
* string	使用给定的字符串来代表被修剪的文本
* initial	设置为属性默认值
* inherit	从父元素继承该属性值
* 需要配合以下两个属性使用：
* white-space: nowrap;
* overflow: hidden;
* **************************************************************************
* white-space属性指定元素内的空白怎样处理。
* normal	默认。空白会被浏览器忽略。
* pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
* nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
* pre-wrap	保留空白符序列，但是正常地进行换行。
* pre-line	合并空白符序列，但是保留换行符。
* inherit	规定应该从父元素继承 white-space 属性的值。
* **************************************************************************
* overflow属性规定当内容溢出元素框时发生的事情。
* visible,默认，空白不会被修剪，会被呈现在元素框之外
* hidden,内容会被修剪，并且剩余内容是不可见的
* scroll,内容会被修剪，浏览器会显示滚动条以便查看其余内容
* auto,如果内容被修剪，浏览器会显示滚动条以便查看其余内容
* inherit,规定应该从父元素继承overflow属性
* **************************************************************************
* display: -webkit-box;父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应。
* 常用属性3个
* box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。
* box-pack: start | end | center | justify; 该属性定义父元素的子元素是如何排列的
* box-align: start | end | center | baseline | stretch; 也是沿着box-align方向的
* **************************************************************************
* -webkit-line-clamp属性用于限制块容器可能包含的行数
* *****************************************************************************
* margin的值为auto的具体含义:
* auto意为自动填充。以margin:0,auto;为例，程序会自动计算剩余左右两部分的空白长度，把其等分再作为div左右的外边距,所以可以使用此行代码使得div居中。
*/
.div_content div .article {
max-height: 50px;
/** 超出的文本隐藏**/
overflow: hidden;
/** 溢出用省略号显示**/
text-overflow: ellipsis;
/** 将对象作为弹性伸缩盒子模型显示**/
display: -webkit-box;
/** 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。**/
-webkit-line-clamp: 3;
/**从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)**/
-webkit-box-orient: vertical;
/** 文子颜色 **/
color: #666666;
/** 文子大小 **/
font-size: 0.92rem;
/** 文子字符间距 **/
letter-spacing: 0.1rem;
/** 文子行间距 **/
line-height: 1rem;
/** 距离顶部间隔 **/
margin-top: 0.3rem;
margin-right: 0.8rempx;
margin-right: auto;
}

window.onload = function() {
//
document.getElementById("div_nav").addEventListener("click", displayDate);
//创建文章列表
var list = [];
for (var i = 0; i < dataArray.length; i++) {
var tmp =
"<div class="div_article" id="div_article" onclick="displayDate(" + i + ")" >" +
"<h4>" + dataArray[i].title + "</h4>" +
"<div>" +
"<p class="article">" + dataArray[i].content + "</p>" +
"<img src="images/test2.jpg" />" +
"</div>" +
"</div>";
list.push(tmp);
}
var ss = list.join('');
document.getElementById("div_content").innerHTML = ss;
//循环绑定点击事件
// let dd = document.getElementsByClassName('div_article');
// for (var i = 0; i < dd.length; i++) {
//
var ss = dd[i];
//
ss.index = i;
//
ss.onclick = function() {
//
alert('第' + (this.index + 1) + '个');
//
}
// }
}
//数据源
var dataArray = [{
title: "aa",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
},
{
title: "bb",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
},
{
title: "cc",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
}
];
//列表点击事件
function displayDate(position) {
alert(dataArray[position].title)
}

最后

以上就是超级彩虹为你收集整理的html+css+javascript常用实例之 文章列表的全部内容，希望文章能够帮你解决html+css+javascript常用实例之 文章列表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。