Skip to content

Commit 29a2c1a

Browse files
zhouxiaotianzhouxiaotian
committed
submit info
1 parent 0f8f380 commit 29a2c1a

File tree

5 files changed

+243
-1
lines changed

5 files changed

+243
-1
lines changed

‎WEEK8/SINA/css/index.less‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,4 +217,108 @@ html, body {
217217
}
218218
}
219219
}
220-
}
220+
}
221+
222+
/*--NEWS--*/
223+
.news {
224+
padding: 0 .2rem;
225+
background: #FFF;
226+
227+
.item {
228+
li {
229+
padding: .2rem 0;
230+
border-bottom: .02rem solid #DDD;
231+
a {
232+
display: block;
233+
position: relative;
234+
235+
img {
236+
position: absolute;
237+
top: 0;
238+
left: 0;
239+
width: 2rem;
240+
height: 1.34rem;
241+
}
242+
243+
div {
244+
margin-left: 2.2rem;
245+
p {
246+
font-size: .34rem;
247+
line-height: .48rem;
248+
color: #555;
249+
}
250+
span {
251+
display: block;
252+
line-height: .3rem;
253+
text-align: right;
254+
color: #888;
255+
font-size: .22rem;
256+
vertical-align: middle;
257+
258+
i {
259+
margin-left: .1rem;
260+
font-size: .24rem;
261+
vertical-align: middle;
262+
}
263+
}
264+
}
265+
}
266+
}
267+
}
268+
269+
.image {
270+
padding: .2rem 0;
271+
border-bottom: .02rem solid #DDD;
272+
273+
a {
274+
display: block;
275+
}
276+
277+
p {
278+
font-size: .34rem;
279+
line-height: .48rem;
280+
color: #555;
281+
text-overflow: ellipsis;
282+
white-space: nowrap;
283+
overflow: hidden;
284+
}
285+
286+
div {
287+
margin: .3rem 0;
288+
img {
289+
float: left;
290+
width: 32%;
291+
height: 1.24rem;
292+
293+
&:not(:nth-last-of-type(1)) {
294+
margin-right: 2%;
295+
}
296+
}
297+
}
298+
299+
span {
300+
display: block;
301+
line-height: .3rem;
302+
text-align: right;
303+
color: #888;
304+
font-size: .22rem;
305+
vertical-align: middle;
306+
307+
i {
308+
margin-left: .1rem;
309+
font-size: .24rem;
310+
vertical-align: middle;
311+
}
312+
}
313+
}
314+
}
315+
316+
317+
318+
319+
320+
321+
322+
323+
324+

‎WEEK8/SINA/images/news.jpg‎

30.6 KB
Loading

‎WEEK8/SINA/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,27 @@ <h1>新浪网<a href="" class="icon-logo"></a></h1>
6565
<!--<li><a href="">沪指跌0.1%雄安股跳水</a></li>-->
6666
</ul>
6767
</aside>
68+
69+
<section class="news">
70+
<!--<ul class="item">
71+
<li><a href="">
72+
<img src="images/news.jpg" alt="">
73+
<div>
74+
<p>房企再次涌入三四线市场 持续性待考</p>
75+
<span>29万<i class="icon-comment"></i></span>
76+
</div>
77+
</a></li>
78+
</ul>-->
79+
<!--<div class="image">
80+
<p>房企再次涌入三四线市场 持续性待考</p>
81+
<div class="clearfix">
82+
<img src="images/news.jpg" alt="">
83+
<img src="images/news.jpg" alt="">
84+
<img src="images/news.jpg" alt="">
85+
</div>
86+
<span>29万<i class="icon-comment"></i></span>
87+
</div>-->
88+
</section>
6889
</main>
6990

7091
<!--IMPORT JS-->

‎WEEK8/SINA/js/index.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,81 @@ let asideRender = (()=> {
137137
})();
138138
asideRender.init();
139139

140+
/*--NEWS--*/
141+
let newsRender = (()=> {
142+
let $news = $('.news'),
143+
$plan = $.Callbacks();
144+
145+
let fn = (result)=> {
146+
let newsList = result['newsList'],
147+
imgList = result['imgList'];
148+
let str = ``;
149+
str += `<ul class="item">`;
150+
$.each(newsList, function () {
151+
str += `<li><a href="${this.link}">
152+
<img src="${this.img}" alt="">
153+
<div>
154+
<p>${this.title}</p>
155+
<span>
156+
${this.count}
157+
<i class="icon-comment"></i>
158+
</span>
159+
</div>
160+
</a></li>`;
161+
});
162+
str += `</ul>`;
163+
164+
str += `<div class="image">`;
165+
str += `<a href="${imgList.link}">`;
166+
str += `<p>${imgList.title}</p>`;
167+
str += `<div class="clearfix">`;
168+
$.each(imgList.img, function () {
169+
str += `<img src="${this}" alt="">`;
170+
});
171+
str += `</div>`;
172+
str += `<span>
173+
${imgList.count}
174+
<i class="icon-comment"></i>
175+
</span>`;
176+
str += `</a>`;
177+
str += `</div>`;
178+
$news.append(str);
179+
180+
$(window).on('scroll', loadMore);
181+
};
182+
183+
let loadMore = ()=> {
184+
let clientH = document.documentElement.clientHeight,
185+
scrollT = document.documentElement.scrollTop || document.body.scrollTop,
186+
winH = document.documentElement.scrollHeight || document.body.scrollHeight;
187+
if (clientH + scrollT + 10 > winH) {
188+
//->加载更多数据
189+
$(window).off('scroll', loadMore);
190+
$.ajax({
191+
url: 'news.json',
192+
method: 'get',
193+
dataType: 'json',
194+
cache: false,
195+
success: fn
196+
});
197+
}
198+
};
199+
200+
$plan.add(fn);
201+
202+
return {
203+
init(){
204+
$.ajax({
205+
url: 'news.json',
206+
method: 'get',
207+
dataType: 'json',
208+
cache: false,
209+
success: $plan.fire
210+
});
211+
}
212+
}
213+
})();
214+
newsRender.init();
140215

141216

142217

‎WEEK8/SINA/news.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"newsList": [
3+
{
4+
"id": 1,
5+
"img": "images/news.jpg",
6+
"title": "房企再次涌入三四线市场 持续性待考",
7+
"count": "39万",
8+
"link": ""
9+
},
10+
{
11+
"id": 1,
12+
"img": "images/news.jpg",
13+
"title": "房企再次涌入三四线市场 持续性待考",
14+
"count": "39万",
15+
"link": ""
16+
},
17+
{
18+
"id": 1,
19+
"img": "images/news.jpg",
20+
"title": "房企再次涌入三四线市场 持续性待考",
21+
"count": "39万",
22+
"link": ""
23+
},
24+
{
25+
"id": 1,
26+
"img": "images/news.jpg",
27+
"title": "房企再次涌入三四线市场 持续性待考",
28+
"count": "39万",
29+
"link": ""
30+
}
31+
],
32+
"imgList": {
33+
"title": "房企再次涌入三四线市场 持续性待考",
34+
"img": [
35+
"images/news.jpg",
36+
"images/news.jpg",
37+
"images/news.jpg"
38+
],
39+
"count": "20万",
40+
"link": ""
41+
}
42+
}

0 commit comments

Comments
 (0)